Skip to content

Templates, Layouts & Partials (zh tw)

Jump to bottom Edit New page
miau715 edited this page Aug 7, 2013 · 3 revisions

#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檔案

###使用對應目錄中的layout檔案

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

###指定想套用的layout檔案

當網站中有少數無法套用制式layout的例外頁面時，可以使用方法2來指定該頁面欲套用的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了。

##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 %>區塊的上方。

Add a custom footer

Fire.app

中文文件 (Chinese version)

日本語ドキュメント (Japanese version)

Clone this wiki locally