Menu

Templates, Layouts & Partials

Fire.app 目前支援以下 Template Languages：

使用 Template Languages 能讓建立HTML變得更簡單。
除此之外還能套用 Layout 及使用 Partial ，有效簡化建置網站 Prototype 時繁雜而高重複性的部份。

Templates

樣板語言有很多種，但如果你想完整的利用 Fire.app 的 Layout 、 Partial 和 Template Helpers 等部分，我們建議使用 ERB 或 Haml 。 這兩種語言對於熟悉 HTML 的 designer/developer 來說都不會太難上手，特別是和 HTML 非常相似的 ERB 。在 ERB 檔案中除了能夠使用一般的 HTML 語法，還能應用 Ruby 語法來省去一些在使用純 HTML 時無法避免的重複性工作。例如像這樣的 HTML ：

<h1>sample list</h1>
<ul>
    <li>list 1</li>
    <li>list 2</li>
    <li>list 3</li>
    <li>list 4</li>
    <li>list 5</li>
</ul>

使用 ERB 撰寫時能夠利用RUBY語法加以簡化，未來想增減條列的數量也非常方便：

<h1>sample list</h1>
<ul>
    <% (1..5).each do |n| %>
        <li>list <%= n %></li>
    <% end %>
</ul>

若使用 Haml 撰寫相同部分則會如下：

%h1 sample list
%ul
  - (1..5).each do |n|
    %li="list "+n.to_s

在 Fire.app 中要使用樣板語言相當簡單，只要存檔時使用相對應的副檔名即可。使用 ERB 時對應的副檔名是 .html.erb，使用 Haml 時對應的副檔名則是 .html.haml 。例如儲存了一個 test.html.erb 檔案在網站的專案目錄下時，在瀏覽器開啟 http://127.0.0.1:24681/test.html 便可以看見該檔案最終呈現的狀況。

以下項目皆使用 ERB 樣板語言進行示範，若想更加了解上述兩種樣板語言，可以參考下列資料：

Layouts

製作一個網站時通常許多頁面會擁有相同的架構和共通元素，使用 HTML 來製作 Prototype 時經常必須把這些相同部分的原始碼複製到各頁面中，要修改時便需要逐個檔案修改，相當麻煩且容易遺漏。藉由 Fire.app 可以利用 Layout 來包含這些頁面中相同部分的原始碼，至於各頁面產出的內容則會生成在 Layout 中 yield 的部份。通常 Layout 檔案的內容會類似於下列原始碼，可以看到 <%= yield %> 的部份便是套用此 Layout 的頁面內容會產生的位置。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Site Title</title>
    <link href="/stylesheets/style.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="header"></div>
        <%= yield %>
        <div class="footer"></div>
    </div>
</body>
</html>

要套用 Layout 有三種方法：

  1. 使用對應目錄中的 Layout 檔案
  2. 指定想套用的 Layout 檔案
  3. 指定 Render Template

使用對應目錄中的 Layout 檔案

當網頁頁面的所在目錄或上層目錄中有 _layout.html.erb 或 _layout.html.haml 檔案時，便會自動套用該檔案做為 Layout ，因此使用時只要將編輯好的 Layout 檔案放在適當的位置即可。當頁面所在資料夾和上層目錄同時都存在 Layout 檔案時會套用同一資料夾的 Layout 。例如網站根目錄下有 /about 和 /products 兩個資料夾，資料夾內各自有該分類的頁面，而根目錄下和 /products 資料夾中都有 Layout 檔案時， /about 資料夾內的頁面會套用根目錄下的 Layout ； /products 資料夾內的頁面則會套用該資料夾內的 Layout 檔案。

指定想套用的 Layout 檔案

當網站中有少數無法套用制式 Layout 的例外頁面時，可以指定該頁面欲套用的 Layout 檔案。方法是建立一個相對應的 Layout 設定檔來指定想套用的 Layout ，舉例來說在網站的根目錄有一個 contact.html.erb 想套用的 Layout 是 /special_layouts/_special_layout.html.erb ，那麼就要在 contact.html.erb 所在的資料夾建立一個新檔案，檔名對應於 contact.html.erb 必須是 contact.html.layout ，這個檔案便是 contact.html.erb 專用的設定檔，只要在檔案中寫這一行：

special_layouts/_special_layout.html.erb

contact.html.erb 便會使用 /special_layouts/_special_layout.html.erb 這個檔案做為套用的 Layout 了。

指定 Render Template

此方法通常用於搭配 content_for 使用，例如當共用的 Layout /_layout.html.erb 中使用了

<% if content_for? :ad %>
    <%= yield :ad %>
<% end %>

使用以上的程式碼，當有設定 :ad 的內容時便會顯示出來。
但要是資料夾 /doc 中所有的頁面都要顯示同樣的 :ad 內容但使用同樣的預設 Layout ，就可以在 /doc 中新增一個供此資料夾內檔案使用的 Layout /doc/_layout.html.erb ，內容為：

<% content_for :ad do %>
    doc 資料夾內共用的廣告內容
<% end %>

<%= render :template => "/_layout" %>

如此便可在使用相同 Layout 的狀況下新增可共用的 content_for 設定。關於 content_for 的詳細用法請參照： Template Helpers

Partials

在前面的介紹可以看到隨著頁面性質的不同可以套用不同的 Layout ，可想而知一個網站的 Layout 很可能不只一種。然而在不同的 Layout 中仍然可能會有共同的網頁元件，如側欄、主選單等。 Partials 便是用來將這些經常重複出現的部份抽出成單一檔案，便於維護和再利用。 Partial 的檔名需以底線 _ 開頭，例如 _footer.html.erb 或 _footer.html.haml ，無論是 Layout 檔案、頁面檔案或 Partial 檔都可以利用 render 語法來取用，如 <%= render :partial => "footer" %> 。

詳細使用方式請見以下範例：

首先將網站中的主選單取出成 Partial ，內容是

<ul id="main_menu">
    <li class="about"><a href="#">About</a></li>
    <li class="products"><a href="#">Products</a></li>
    <li class="contact"><a href="#">Contact</a></li>   
</ul>

檔名取為 _main_menu.html.erb ，當同一個資料夾內的 _layout.html.erb 檔案想載入主選單的部分時便可以寫成：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Site Title</title>
    <link href="/stylesheets/style.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="header">
            <%= render :partial => "main_menu" %>
        </div>
        <%= yield %>
        <div class="footer"></div>
    </div>
</body>
</html>

需注意的是 render 部分的引號中輸入的是 Partial 檔案的檔名去掉底線也不帶有副檔名的部分，這麼一來只要是套用了這個 Layout 的頁面便都會有主選單出現在 <%= yield %> 區塊的上方。