極客書

Ruby on Rails - Layouts

布局定義HTML頁面的周圍環境。這是定義最終輸出的共同外觀的地方。布局文件位於app/views/layouts中。

這個過程包括定義一個布局模板，然後讓控制器知道它存在並使用它。首先，讓我們創建模板。

將名爲standard.html.erb的新文件添加到app/views/layouts。您可以通過文件名讓控制器知道要使用什麼模板，因此建議遵循相同的命名方案。

將以下代碼添加到新的standard.html.erb文件中並保存所做的更改;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1" />
      <meta http-equiv = "Content-Language" content = "en-us" />
      <title>Library Info System</title>
      <%= stylesheet_link_tag "style" %>
   </head>

   <body id = "library">
      <div id = "container">
         
         <div id = "header">
            <h1>Library Info System</h1>
            <h3>Library powered by Ruby on Rails</h3>
         </div>

         <div id = "content">
            <%= yield -%>
         </div>

         <div id = "sidebar"></div>
         
      </div>
   </body>
   
</html>

您剛才添加的所有內容都是標準的HTML元素，只有兩行除外。樣式表連結標籤幫助程序方法輸出樣式表<連結>。在本例中，我們正在連結style.css樣式表。yield命令讓Rails知道應該爲這裡調用的方法放置html.erb。

現在打開book_controller.rb並在第一行下方添加以下行−

class BookController < ApplicationController
layout 'standard'
def list
@books = Book.all
end
...................

它指示控制器要使用standard.html.erb文件中提供的布局。現在嘗試瀏覽將產生以下螢幕的書籍。

Layout Example

Adding Style Sheet

到目前爲止，我們還沒有創建任何樣式表，因此Rails使用默認樣式表。現在，讓我們創建一個名爲style.css的新文件，並將其保存在/public/stylesheets中。將以下代碼添加到此文件中。

body {
   font-family: Helvetica, Geneva, Arial, sans-serif;
   font-size: small;
   font-color: #000;
   background-color: #fff;
}

a:link, a:active, a:visited {
   color: #CD0000;
}

input { 
   margin-bottom: 5px;
}

p { 
   line-height: 150%;
}

div#container {
   width: 760px;
   margin: 0 auto;
}

div#header {
   text-align: center;
   padding-bottom: 15px;
}

div#content {
   float: left;
   width: 450px;
   padding: 10px;
}

div#content h3 {
   margin-top: 15px;
}

ul#books {
   list-style-type: none;
}

ul#books li {
   line-height: 140%;
}

div#sidebar {
   width: 200px;
   margin-left: 480px;
}

ul#subjects {
   width: 700px;
   text-align: center;
   padding: 5px;
   background-color: #ececec;
   border: 1px solid #ccc;
   margin-bottom: 20px;
}

ul#subjects li {
   display: inline;
   padding-left: 5px;
}

現在刷新您的瀏覽器並查看差異;

Layout Example

What is Next?

下一章將解釋如何使用Rails Scaffolding開發應用程式，使用戶能夠添加、刪除和修改任何資料庫中的記錄。