icon Web设计的Ruby on Rails

第3章 布局和局部模板

这章的主题是模板分割方法、布局和局部模板。

布局就是包含主要模板的模板。请看下面 2 个 RHTML 模板。

<html>
<head>
  <title><%= @title %></title>
</head>
<body>
<%= yield :layout %>
</body>
</head>
<h1><%= @title %></h1>
<h2><%= @chapter_heading %></h2>
<% @paragraphs.times do |p| -%>
  <p><%= p %></p>
<% end -%>

上面的是布局，下面的是主要模板。请注意布局也是模板的一种。对应动作如下，想想会产生怎样的 HTML 代码吧。

@title = '个人信息保护方针'
@chapter_heading = '基本方针'
@paragraphs = [
  '本公司遵守个人信息保护法以及其他相关法律、法规。',
  '本公司在向顾客公示的利用目的范围内使用个人信息。',
  '本公司致力于防止个人信息的非法查询。'
]

结果如下。

<html>
<head>
  <title>个人信息保护方针</title>
</head>
<body>
<h1>个人信息保护方针</h1>
<h2>基本方针</h2>
  <p>本公司遵守个人信息保护法以及其他相关法律、法规。</p>
  <p>本公司在向顾客公示的利用目的范围内使用个人信息。</p>
  <p>本公司致力于防止个人信息的非法查询。</p>
</body>
</head>

请不要太在意缩进有点不规则。最后的 HTML 代码缩进的对齐方法，将会在这篇文章的后面说明。

请注意布局模板的 body 元素里的这行。

<%= yield :layout %>

这个表现有些独特，姑且把它硬背下来吧。这里我们在渲染主要模板后将它插入。顺便说一下，英语里的动词yield是“产出（作物等）”的意思。

以上的例子中，因为 HTML 代码并不是很大，可能不太容易感受到它的优点，但是因为分割了 Web 网页，很容易掌握 HTML 的结构。

下面继续学习局部模板。

局部模板就是模板中包含的模板片段。外部的模板无论是布局还是主要模板都行。看下面 2 个 RHTML 模板。

<html>
<head>
  <title><%= @title %></title>
</head>
<body>
  <div id="container">
    <div id="header"><%= render :partial => "header" %></div>
    <div id="main"><%= yield :layout  %></div>
    <div id="linkList"><%= render :partial => "link_list" %></div>
    <div id="footer"><%= render :partial => "footer" %></div>
  </div>
</body>
</head>
<a href="/index.html"><img src="/images/company_logo.gif"
  width="161" height="64" alt="トップページ" border="0" /></a>
<hr />

下面的模板取名为 header 。嵌套在上面的模板的 <%= render :partial => "header" %> 的部分中。添加 :partial 选项并调用方法 render ，局部模板就被插入到那个位置。英语的 partial 是“部分的”意思的形容词。

像下面一样创建一个 CSS 文件的话，一个不错的“栏布局”就形成了。

#container {
  width: 750px;
}

#header {
  background-color: #ddddee;
  height: 80px;
}

#main {
  float: left;
  width: 550px;
}

#linkList {
  float: right;
  width: 200px;
}

#footer {
  background-color: #eedddd;
  height: 40px;
}

使用样式表文件的话结构和样式便被分离开来。另外，使用布局和局部模板的话可以把内容从文件的结构中分离开来。Web制作是个复杂的工程，尽量分离能分离的部分，使之成为小单位再进行操作，就提高了工作效率，并可以减少错误。

下一章终于要安装Rails并试着运行了。让我们尽情期待吧。

（2007/10/08）