【Ruby on Rails】Layout(布局)-极客日记

概念

所有的 action 在渲染页面的时候，都会把动态内容的外层，包裹一个 HTML 页面。这个 HTML 页面，就是一个 layout。

都放在 app/views/layouts/ 目录下.

例子

从一个例子看起：

假设我们有两个页面：

page1.html.erb

<html>
  <head>
    <title>图书管理系统</title>
    <script src='jquery.js'></script>
  </head>
  <body>
    <div> 我是页面1 </div>
    <div class='footer'>
      copyright(at)2015 xx.co.ltd
    </div>
  </body>
</html>

page2.html.erb

<html>
  <head>
    <title>图书管理系统</title>
    <script src='jquery.js'></script>
  </head>
  <body>
    <div> 我是页面2 </div>
    <div class='footer'>
      copyright(at)2015 xx.co.ltd
    </div>
  </body>
</html>

可以看出，代码重复率，高达 90%。

解决办法

把公共的代码提取出来：

新建一个页面： app/views/layouts/application.html.erb

<html>
  <head>
    <title>图书管理系统</title>
    <script src='jquery.js'></script>
  </head>
  <body>
    <%= yield %>
    <div class='footer'>
      copyright(at)2015 xx.co.ltd
    </div>
  </body>
</html>

其中的 <%= yield %> 区域，规定了会变化的内容。其他的内容，都是固定的。

这就是最简单的也是最常见的 layout

使用方式

在 controller 中，默认就会加载 application.html.erb 这个文件，作为 layout. 也可以显式的给它标记出来：

class BooksController < ApplicationController
  # 这个是Rails的惯例，其实不用写。
  layout 'application'
end

如何使用不同的 layout?

在不同的 controller 中使用不同的 layout：

class BooksController < ApplicationController
  layout 'one'
end

```ruby
class FruitsController < ApplicationController
  layout 'two'
end

在同一个 controller 中，不同的 action 使用不同的 layout:

def index
    render layout: "two"
  end

  def edit
    render layout: "one"
  end

我不想使用 layout 呢？

可以如下面所示:

 def index
    render layout: false
  end

什么是 <%= yield %> ?

yield 是把某个 block 调用后，在该位置显示结果。也就是，所有你们写的 erb 文件的选然后的内容，最后都嵌到了这个 layout 中。

布局中，如何放 js, css ?

按照传统的形式直接写上去。

<link href="http://cdn.dfile.cn/v/1434451523/i1/css/dict.min.css" media="screen" rel="stylesheet" type="text/css" />

使用 javascript_include_tag 和 stylesheet_link_tag

原始的 html:

<script src="./static/javascript/jquery.min.js"></script>
<script src="./static/javascript/jqueryui.min.js"></script>
<script src="./static/javascript/bootstrap.min.js"></script>

在 rails 当中，往往把所有的 js 文件，都放到 app/assets/javascripts 目录下。

然后：

<%= javascript_include_tag 'jquery.min.js' %>
<%= javascript_include_tag 'jqueryui.min.js' %>
<%= javascript_include_tag 'bootstrap.min.js' %>

最大的优点：js/css 在不同的模式下（development, production) 的路径是不同的。 rails 会自动识别它的路径。

以上两种办法法不推荐，一旦引用的外部 js/css 写多了，会直接拖慢页面打开速度.

使用 asset pipeline

目录CONTENT

【Ruby on Rails】Layout(布局)

概念

例子