ror-tutorial-v2-notes

为页面添加动态内容

目前为止，/static_pages/home, /static_pages/help, /static_pages/about页面都是静态内容，对应下面三个模板文件:

app/views/static_pages/home.html.erb
app/views/static_pages/help.html.erb
app/views/static_pages/about.html.erb

现在我们想给每个页面加上一点动态内容，达到如下效果: 浏览器在访问每个页面时，其title部分会显示该页面的名字，例如我的博客www.pureage.info，当访问某个页面时，浏览器会显示如下:

那个标红的部分就是动态出现的部分。我们现在想为home,help和about页面达到同样的效果。

首先先静态处理每个模板文件，以达到同样的效果。编辑三个模板本文件，分别如下：

app/views/static_pages/home.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Ruby on Rails Tutorial Sample App | Home</title>
</head>
<body>
  <h1>Sample App</h1>
  <p>
    This is the home page for the
    <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a>
    sample application.
  </p>
</body>
</html>

app/views/static_pages/help.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Ruby on Rails Tutorial Sample App | Help</title>
</head>
<body>
  <h1>Help</h1>
  <p>
    Get help on the Ruby on Rails Tutorial at the
    <a href="http://railstutorial.org/help">Rails Tutorial help page</a>.
    To get help on this sample app, see the
    <a href="http://railstutorial.org/book">Rails Tutorial book</a>.
  </p>
</body>
</html>

app/views/static_pages/about.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Ruby on Rails Tutorial Sample App | About Us</title>
</head>
<body>
  <h1>About Us</h1>
  <p>
    The <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a>
    is a project to make a book and screencasts to teach web development
    with <a href="http://rubyonrails.org/">Ruby on Rails</a>. This
    is the sample application for the tutorial.
  </p>
</body>
</html>

但是，此时访问http://rails.pureage.info/home 等三个页面，并没有出现想象中的效果，如图:

查看该页面的源代码，如下:

<!DOCTYPE html>
<html>
<head>
  <title>RailsPureageInfo</title>
  <link rel="stylesheet" media="all" href="/assets/static_pages-64e62ddc273c2f5847f30d698ca14b67.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/application-5266d2988799ecc8fe6e81eaab412e7d.css?body=1" data-turbolinks-track="true" />
  <script src="/assets/jquery-87424c3c19e96d4fb033c10ebe21ec40.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs-e27bd20a10d28155845a22d71ef94f2f.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/turbolinks-f87b3583ca50adb0488b031297f5580d.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/static_pages-fcec5b5a277ac7c20cc9f45a209a3bcd.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application-12b8f543cd30f7da91cbc02f9924ff5c.js?body=1" data-turbolinks-track="true"></script>
  <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="0RBsB13D2Y8Cu8eCiVSzhyu8fYz163tO1gK8zrDK0rYtZD90X3Icp7ljd4k/ckc65E/J525YRwxTL8JkQ52+0A==" />
</head>
<body>

<!DOCTYPE html>
<html>
  <head>
    <title>Ruby on Rails Tutorial Sample App | Home</title>
  </head>
  <body>
    <h1>Sample App</h1>
    <p>
      This is the home page for the
      <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a>
      sample application.
    </p>
  </body>
</html>


</body>
</html>

可见，问题出在其页面源代码除了我们添加的一部分外，还多了一部分自动生成的html代码。

这一部分代码来自于文件app/views/layouts/application.html.erb。该文件的内容为:

<!DOCTYPE html>
<html>
<head>
  <title>RailsPureageInfo</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

为了使我们的设置生效，先删除掉该app/views/layouts/application.html.erb文件:

[fangpeng@vps1 rails.pureage.info]$ mv app/views/layouts/application.html.erb foobar

同时，为了显示方便，将三个模板文件的页面名字在title中搬到前面，例如，将

<title>Ruby on Rails Tutorial Sample App | Home</title>

改为:

<title>Home|Ruby on Rails Tutorial Sample App</title>

此时，我们再从浏览器中访问这三个页面，发现效果已经达到:

但现在有几个问题：

三个页面其实仍然是静态页面
每个文件的结构重复度极高。

为了解决这个问题，我们需要用到erb了，即嵌入式的ruby,和刚才被我们删除的layout文件。

首先，恢复layout文件:

[fangpeng@vps1 rails.pureage.info]$ mv foobar app/views/layouts/application.html.erb

并将其内容修改为:

<!DOCTYPE html>
<html>
<head>
  <title><%= yield(:title)%>|Ruby on Rails Tutorial Sample App</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

修改三个模板文件分别如下:

app/views/static_pages/home.html.erb

<% provide(:title, 'Home') %>
<h1>Sample App</h1>
<p>
This is the home page for the
<a href="http://railstutorial.org/">Ruby on Rails Tutorial</a>
sample application.
</p>

app/views/static_pages/help.html.erb

<% provide(:title, 'Help') %>
<h1>Help</h1>
<p>
Get help on the Ruby on Rails Tutorial at the
<a href="http://railstutorial.org/help">Rails Tutorial help page</a>.
To get help on this sample app, see the
<a href="http://railstutorial.org/book">Rails Tutorial book</a>.
</p>

app/views/static_pages/about.html.erb

<% provide(:title, 'About Us') %>
<h1>About Us</h1>
<p>
The <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a>
is a project to make a book and screencasts to teach web development
with <a href="http://rubyonrails.org/">Ruby on Rails</a>. This
is the sample application for the tutorial.
</p>

此时，即可达到本节的目的。

以上主要用到了如下几个知识点:

app/views/layouts/application.html.erb文件是一个骨架型的文件，当一个controller下的页面结构相通时，可以用该文件来将相同部分提炼出来。
在页面模板中使用<% provide(:title, 'About Us') %>方法来定义erb变量
在laycout文件中使用 <%= yield(:title)%>来展开变量。