5.1 添加一些結構 · Ruby on Rails 教程

# 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——這沒什么關系，因為構思圖沒必要畫出每個細節。 ![home page mockup 3rd edition](https://box.kancloud.cn/2016-05-11_5732bd0288306.png)圖 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 ``` <!DOCTYPE html> <html> <head> <title><%= full_title(yield(:title)) %></title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %>  </head> <body> <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> <div class="container"> <%= yield %> </div> </body> </html> ``` 我們從上往下看一下這段代碼中新添加的元素。[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 ``` <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> ``` 現在我們已經知道怎么創建局部視圖了，讓我們來加入和頭部對應的網站底部吧。你或許已經猜到了，我們會把這個局部視圖命名為 `_footer.html.erb`，放在布局文件夾中，如[代碼清單 5.11](#listing-footer-partial) 所示。[[10](#fn-10)] ##### 代碼清單 5.11：網站底部的局部視圖 app/views/layouts/_footer.html.erb ``` <footer class="footer"> <small> The <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a> by <a href="http://www.michaelhartl.com/">Michael Hartl</a> </small> <nav> <ul> <li><%= link_to "About", '#' %></li> <li><%= link_to "Contact", '#' %></li> <li><a href="http://news.railstutorial.org/">News</a></li> </ul> </nav> </footer> ``` 和頭部類似，在底部我們使用 `link_to` 創建到“關于”頁面和“聯系”頁面的鏈接，地址先使用占位符 `#`。（和 `header` 一樣，`footer` 也是 HTML5 新增加的標簽。）按照 HTML shim 和頭部局部視圖的方式，我們也可以在布局視圖中渲染底部局部視圖，如[代碼清單 5.12](#listing-layout-with-footer) 所示。 ##### 代碼清單 5.12：添加底部局部視圖后的網站布局 app/views/layouts/application.html.erb ``` <!DOCTYPE html> <html> <head> <title><%= full_title(yield(:title)) %></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' %> </head> <body> <%= render 'layouts/header' %> <div class="container"> <%= yield %> <%= render 'layouts/footer' %> </div> </body> </html> ``` 當然，如果沒有樣式的話，底部還很丑。底部的樣式參見[代碼清單 5.13](#listing-footer-css)，效果如[圖 5.7](#fig-site-with-footer) 所示。 ![site with footer bootstrap 3rd edition](https://box.kancloud.cn/2016-05-11_5732bd032946e.png)圖 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; } ```