学习中：项目继续，开始优化页面

时间：2019-10-16 19:50:50 阅读：57 评论：0 收藏：0 [点我收藏+]

一. 添加一些结构

1.网站导航

(1).打开文件：app/views/layouts/application.html.erb（添加一些结构后的网站布局文件）

技术分享图片

简单介绍一下，添加的代码：

我们从上往下看一下这段代码中新添加的元素。前面简单介绍过,Rails 默认使用 HTML5(如文档类型声明 <!DOCTYPE html> 所示)。因为 HTML5 标准还很新,
有些浏览器(特别是旧版 Internet Explorer)还没有完全支持,所以我们加载了一些 JavaScript 代码(称作 HTML5 shim(或 shiv)) 3 来解决这个问题:
<!--[if lt IE 9]>
　　<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
　　</script>
<![endif]-->
这段有点古怪的句法,只有当 IE 浏览器的版本号小于9时( if lt IE 9 )才会加载其中的代码。 <!--[if ltIE 9]> 这个奇怪的句法不是 Rails 提供的,其实
它是 IE 浏览器为了解决兼容性问题而特别提供的。使用这个句法的好处是,只会在 IE9 以前的版本中加载 HTML5 shim,而 Firefox、Chrome 和 Safari 等其
他浏览器不受影响。-->

后面的区域是一个 header 元素,包含网站的徽标(纯文本)、一些区域(使用 div 标签)和一个导航列表元素:
<header class="navbar navbar-fixed-top navbar-inverse">
　　<div class="container">
　　　　<%= link_to "sample app", ‘#‘, id: "logo" %>
　　　　<nav>
　　　　　　<ul class="nav navbar-nav navbar-right">
　　　　　　　　<li><%= link_to "Home", ‘#‘ %></li>
　　　　　　　　<li><%= link_to "Help", ‘#‘ %></li>
　　　　　　　　<li><%= link_to "Log in", ‘#‘ %></li>
　　　　　　</ul>
　　　　</nav>
　　</div>
</header>
header 标签表明这个元素应该放在页面的顶部。我们为 header 标签指定了三个 CSS 类, 分别为 navbar 、navbar-fixed-top 和 navbar-inverse ,类之间
用空格分开:
<header class="navbar navbar-fixed-top navbar-inverse">
所有 HTML 元素都可以指定类和 ID,它们不仅仅是标注,使用 CSS 编写样式时也有用。类和ID之间的主要区别是,类可以在同一个网页中多次使用,而 ID 只能使用一次。
这里的三个类在 Bootstrap 框架中都有特殊的意义。我们会在下面安装并使用 Bootstrap。

在 header 标签中,有一个 div 标签:
<div class="container">
div 标签标识常规的区域,除了把文档分成不同的部分之外,没有特殊的意义。在以前的 HTML 标准中, div标签用于划分网站中几乎所有的区域,但是 HTML5 增加了 
header 、 nav 和 section 等元素,用于划分大多数网站中都会用到的区域。这个 div 标签也有一个 CSS 类, container 。与 header 标签的类一样,这个类在
Bootstrap 中也有特殊意义。

在这个 div 标签中有一些 ERb 代码:
<%= link_to "sample app", ‘#‘, id: "logo" %>
　　<nav>
　　<ul class="nav navbar-nav navbar-right">
　　　　<li><%= link_to "Home", ‘#‘ %></li>
　　　　<li><%= link_to "Help",‘#‘ %></li>
　　　　<li><%= link_to "Log in", ‘#‘ %></li>
　　</ul>
</nav>
这里使用 Rails 提供的 link_to 辅助方法创建链接(前面是直接使用 a 标签创建的)。 link_to 的第一个参数是链接文本,第二个参数是 URL。5.3.3 节会使用具名
路由(named route)指定 URL,现在暂且使用 Web开发中经常使用的占位符 # 。第三个参数可选,是一个散列,本例使用这个参数为徽标添加一个 CSSID—— logo 。(其
他三个链接没有使用这个散列参数,没关系,因为这个参数是可选的。)Rails 辅助方法的参数经常这样使用散列,让我们仅使用 Rails 的辅助方法就能灵活添加 HTML 属性。

div 标签中的第二个元素是导航链接,使用无序列表标签 ul ,以及列表项目标签 li 编写:
<nav>
　　<ul class="nav navbar-nav navbar-right">
　　　　<li><%= link_to "Home", ‘#‘ %></li>
　　　　<li><%= link_to "Help", ‘#‘ %></li>
　　　　<li><%= link_to "Log in", ‘#‘ %></li>
　　</ul>
</nav>
<nav> 标签以前是不需要的,它的目的是明确表明这些链接是导航。 ul 标签中的 nav 、 navbar-nav 和 navbar-right 三个类在 Bootstrap 中有特殊的意义,下面
将引入 Bootstrap CSS 之后会自动实现特殊的样式。在浏览器中审查导航元素,你会发现 Rails 处理布局文件并执行其中的 ERb 代码后,生成的列表如下所示: 
<nav>
　　<ul class="nav navbar-nav navbar-right">
　　　　<li><a href="#">Home</a></li>
　　　　<li><a href="#">Help</a></li>
　　　　<li><a href="#">Log in</a></li>
　　</ul>
</nav>
这就是返回给浏览器的文本。

布局文件的最后一部分是一个 div 标签,标识主内容区域:
<div class="container">
　　<%= yield %>
</div>
与之前一样, container 类在 Bootstrap 中有特殊意义。3.4.3 节已经介绍过, yield 会把各个页面中的内容插入网站的布局中。除了留到下面的内容添加的网站页脚之
外,布局现在完成了。访问“首页”就能看到结果。为了利用后面添加的样式,我们要在 home.html.erb 视图中添加一些元素,如下代码所示：

简单介绍

(2).我们要在 home.html.erb 视图中添加一些元素, 如下所示：

打开文件：app/views/static_pages/home.html.erb（“首页”视图,包含一个指向注册页面的链接）

技术分享图片

简单介绍一下，添加的代码：

其中第一个 link_to 创建一个占位链接,指向第 7 章创建的用户注册页面:
<a href="#" class="btn btn-lg btn-primary">Sign up now!</a>
div 标签的 CSS 类 jumbotron 在 Bootstrap 中有特殊的意义,注册按钮的 btn 、btn-lg 和 btn-primary 也是一样。
第二个 link_to 用到了 image_tag 辅助方法,它的第一个参数是图像的路径;第二个参数可选,是一个散列,本例中这个散列参数使用一个符号键设置图像的 alt 属性。为了
能正确显示图像,应用中必须有个名为rails.png 的图像。这个图像随便找找，怼上。后面不好看的话再换也一样。然后把这个图片放到app/assets/images/ 目录中。
因为我们在上面的代码中使用了 image_tag 辅助方法,Rails 会通过 Asset Pipeline自动找到 app/assets/images/ 目录中的任何图像。

简单介绍

然后，来瞧一瞧页面吧：

技术分享图片

注：不得不说页面真的是丑陋无比，不过我也懒得改了，先这样吧，忍着。

(3).更好的理解image_tag

我们在浏览器中审查那个图像,看一下生成的 HTML:

<img alt="Rails logo" src="/assets/rails-88ddc9b4a116e8a8525f8c29ed8f8a89f2e93c78e07b932b04e2a65794e6c34f.png">

其中,字符串rails-88ddc9b4a116e8a8525f8c29ed8f8a89f2e93c78e07b932b04e2a65794e6c34f(你看到的可能不一样)由 Rails 添加,目的是确保文件名的唯一性,如果文件变化了,让浏览器重新加载文件(而不是从浏览器缓存中读取)。注意, src 属性中并不包含 images ,而是静态文件(图像、JavaScript、CSS 等)共用的 assets 目录。在服务器中,Rails 会把assets 目录中的图像和 app/assets/images 目录中的文件对应起来。这么做是为了让浏览器觉得所有静态文件都在同一个目录中,有利于快速伺服。 alt 属性的内容会在图像无法加载时显示,例如在针对视觉障碍人士的屏幕阅读器中。

2.Bootstrap 和自定义的 CSS

(1).安装Bootstrap

把 bootstrap-sass gem 添加到 Gemfile 文件中：

技术分享图片

$ bundle install

rails generate 命令会自动为控制器生成一个单独的 CSS 文件, 但很难使用正确的顺序引入这些样式, 所以简单起见, 本书会把所有 CSS 都放在一个文件中。为此, 我们要先新建这个 CSS 文件：

$ touch app/assets/stylesheets/custom.scss

注：app/assets/stylesheets/ 目录是 Asset Pipeline 的一部分, 其中所有的样式表都会引入 application.css 文件。文件名 custom.scss 中包含 .scss 扩展名, 说明这是“Sassy CSS”文件, Asset Pipeline 会使用 Sass 处理其中的内容。

在这个 CSS 文件中,我们可以使用 @import 函数引入 Bootstrap，如下所示：

(2).导入 Bootstrap 中的 CSS

打开文件：app/assets/stylesheets/custom.scss

技术分享图片