5.1 添加一些结构
最后更新于：2022-04-01 22:28:44
# 5.1 添加一些结构
本书介绍 Web 开发而不是 Web 设计，不过在一个看起来很简陋的应用中开发会让人提不起劲，所以本节要向布局中添加一些结构，再加入一些 CSS 实现基本的样式。除了使用自定义的 CSS 之外，我们还会使用由 Twitter 开发的开源 Web 设计框架 [Bootstrap](http://getbootstrap.com/)。我们会按照一定的方式组织代码——当布局文件中的内容变多以后，使用局部视图清理。
开发 Web 应用时，尽早对用户界面有个统筹安排往往会对你有所帮助。在本书后续内容中，我会经常使用网页构思图（mockup）（在 Web 领域经常称之为“线框图”），展示应用最终外观的草图。[[2](#fn-2)]本章大部分内容都在开发 [3.2 节](chapter3.html#static-pages)编写的静态页面，我们要在页面中加入一个网站 LOGO、导航条和网站底部。这些页面中最重要的是“首页”，它的构思图如[图 5.1](#fig-home-page-mockup) 所示，[图 5.7](#fig-site-with-footer) 是最终实现的效果。你会发现二者之间的某些细节有所不同，例如，在最终实现的页面中我们加入了一个 Rails LOGO——这没什么关系，因为构思图没必要画出每个细节。
图 5.1：演示应用首页的构思图
和之前一样，如果使用 Git 做版本控制，现在最好创建一个新分支：
```
$ git checkout master
$ git checkout -b filling-in-layout
```
## 5.1.1 网站导航
在应用中添加链接和样式之前，我们先来修改网站的布局文件 `application.html.erb`（上一次见到是在[代码清单 4.3](chapter4.html#listing-application-layout-full-title) 中），添加一些 HTML 结构。我们要添加一些区域，一些 CSS 类，以及导航条。布局文件的完整内容参见[代码清单 5.1](#listing-layout-new-structure)， 对各部分的说明紧跟其后。如果你迫不及待想看到结果，请看[图 5.2](#fig-layout-no-logo-or-custom-css)。（注意：结果（还）不是很让人满意。）
##### 代码清单 5.1：添加一些结构后的网站布局文件
app/views/layouts/application.html.erb
```
<%= full_title(yield(:title)) %>
<%= stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
```
现在我们已经知道怎么创建局部视图了，让我们来加入和头部对应的网站底部吧。你或许已经猜到了，我们会把这个局部视图命名为 `_footer.html.erb`，放在布局文件夹中，如[代码清单 5.11](#listing-footer-partial) 所示。[[10](#fn-10)]
##### 代码清单 5.11：网站底部的局部视图
app/views/layouts/_footer.html.erb
```
```
和头部类似，在底部我们使用 `link_to` 创建到“关于”页面和“联系”页面的链接，地址先使用占位符 `#`。（和 `header` 一样，`footer` 也是 HTML5 新增加的标签。）
按照 HTML shim 和头部局部视图的方式，我们也可以在布局视图中渲染底部局部视图，如[代码清单 5.12](#listing-layout-with-footer) 所示。
##### 代码清单 5.12：添加底部局部视图后的网站布局
app/views/layouts/application.html.erb
```
<%= full_title(yield(:title)) %>
<%= stylesheet_link_tag "application", media: "all",
"data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
<%= render 'layouts/header' %>
';
<%= link_to "sample app", '#', id: "logo" %>
<%= yield %>
```
我们从上往下看一下这段代码中新添加的元素。[3.4.1 节](chapter3.html#testing-titles)简单介绍过，Rails 默认使用 HTML5（如 `<!DOCTYPE html>` 所示）。因为 HTML5 标准还很新，有些浏览器（特别是旧版 IE 浏览器）还没有完全支持，所以我们加载了一些 JavaScript 代码（称作“[HTML5 shim](https://github.com/aFarkas/html5shiv)”）来解决这个问题：
```
```
如下有点古怪的句法
```
```
类似地，我们可以把头部的内容移入局部视图，如[代码清单 5.10](#listing-header-partial) 所示，然后再次调用 `render` 把这个局部视图插入布局中。（一般都要在文本编辑器中手动创建局部视图对应的文件。）
##### 代码清单 5.10：网站头部的局部视图
app/views/layouts/_header.html.erb
```
<%= link_to "sample app", '#', id: "logo" %>
<%= yield %>
<%= render 'layouts/footer' %>
```
当然，如果没有样式的话，底部还很丑。底部的样式参见[代码清单 5.13](#listing-footer-css)，效果如[图 5.7](#fig-site-with-footer) 所示。
图 5.7：添加底部后的首页
##### 代码清单 5.13：添加网站底部的 CSS
app/assets/stylesheets/custom.css.scss
```
.
.
.
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid #eaeaea;
color: #777;
}
footer a {
color: #555;
}
footer a:hover {
color: #222;
}
footer small {
float: left;
}
footer ul {
float: right;
list-style: none;
}
footer ul li {
float: left;
margin-left: 15px;
}
```