demoshop

demo, trying to be the best_

更新更強大的網頁設計師好幫手 Fire.app 進階篇

本篇介紹的是 Fire.app 的進階功能，包括樣板語言、 layout 、 partial 、 Helper 的使用方式。

樣板語言

Fire.app 支援很多種樣板語言，包括 ERB 、Haml 和 Markdown 等等，但如果想完整的利用 Fire.app 的各種強大功能，建議使用 ERB 或 Haml ，因為其他樣板語言雖然可能能加快撰寫速度，但卻沒辦法用來寫 layout 部分(沒有支援此功能的語法)。
在 ERB 語法中是可以直接使用 HTML 標籤的，所以它長得並不會和 HTML 相差太遠，還能應用 Ruby 語法來省去一些在使用純 HTML 時無法避免的重複性工作。例如像這樣的 HTML 放進 ERB 檔案中可以正常呈現：

<h1>範例列表</h1>
<ul>
  <li>列表 1</li>
  <li>列表 2</li>
  <li>列表 3</li>
  <li>列表 4</li>
  <li>列表 5</li>
</ul>

不過同樣的語法也可以利用 RUBY 語法加以簡化，未來想增減條列的數量也非常方便：

<h1>範例列表</h1>
<ul>
  <% (1..5).each do |n| %>
  <li>列表 <%= n %></li>
  <% end %>
</ul>

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

之後的範例也都使用 ERB 樣板語言，如果想深入了解可以參考：

Layouts

只要做過全網站的切版一定都遇過每一頁都在複製貼上的狀況，製作的時候複製貼上，修改起來更是不斷的複製貼上…
藉由 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 。

指定想套用的 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 ，還有 partial 。 前面已經說過隨著網站中頁面性質的不同可以套用不同的 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 %>區塊的上方。

Template Helpers

Helper 是一些能夠在樣板語言中使用的函式，能更簡單的達成許多建置網頁時不可或缺的功能。 Fire.app 提供許多好用的內建 Helper ，若是不敷使用的話也可以自己根據需求撰寫，以下只介紹我自己常用到的部份，其他請參考 Fire.app 官方文件 。

在多個頁面套用 layout 後，常見的問題就是 HTML head 的部份都放進 layout 裡了，但是每頁又需要有不同 title ，這時候就可以使用 Helper ：

<% @title = capture do %>
  我是這一頁的標題
<% end %>

這一段要寫在頁面內，意思是把從 capture do 到 end 之間的東西(可以是一大段的 HTML )塞進變數 @title 中。 至於 layout 檔案中的<title>標題</title>部分則要修改成：

<title><%= @title %></title>

這樣只要在各頁面都寫入指定 @title 的部分，該頁的 title 就會隨之變化了。
如果不想每一頁都指定，而想提供預設值的話 layout 部分則要改成：

<%= @title ? @title : "預設標題" %>

這樣的話只有有指定 @title 的頁面才使用該頁面特定的標題，未指定的頁面則使用預設值。

另外製作網站時也常有類似「主選單對應目前頁面的選項要顯示為啟用狀態」的需求，
在 ERB 中可以使用：

<%= request.path %>

來取得目前頁面的路徑，配合簡單的判斷式就可以不用一頁一頁的找哪裡要改成 active 啦！

Fire.app一大重點 Helper 群便是「假字系列」。可以直接產生中文假字、假句、假段落..真是太方便了！有這麼多可以用：

  • zhloremword, zhloremwords
  • zhloremsentence, zhloremsentences
  • zhloremparagraph, zhloremparagraphs
  • zhloremname
  • zhloremname_pinyin
  • zhloremfirst_name
  • zhloremfirstnamepinyin
  • zhloremlast_name
  • zhloremlastnamepinyin
  • zhlorememail

大概看 Helper 名稱就可以了解用法，譬如使用<%= zh_lorem_paragraphs 3 %>可以自動產生三段文字。這些中文假字Helper當然也有英文版本可以用，除了表示「_pinyin」的 Helper 之外只要把前面的「zh_」拿掉就是英文版了。

如果看完 Fire.app 官方文件 覺得 Helper 還是不夠用，你也可以自己做，只要在專案目錄下建立一個檔名為view_helpers.rb的檔案，內容格式為：

module ViewHelpers
  def helper_name(arg1, arg2, ....)
      return "something"
  end
end

即可，例如我想製作一個產生喵喵假字的 Helper ，就可以在view_helpers.rb裡面定義：

module ViewHelpers
  def meow(num)
      return "喵 "*num + "!"
  end
end

如此一來就可以在樣板中使用<%= meow(3) %>來得到「喵 喵 喵 !」的結果了！

寫了這麼多，也許有人會覺得「設計師搞這麼複雜幹嘛！！？」不過對我來說學了這些真的省了很多複製貼上的工，感覺還是很值得的。如果不喜歡把生命浪費在複製貼上的話強力推薦試試看 :)
心動的人可以到 Fire.app 官網 購買~

系列文章

相關文章

回應討論

系列文章

本頁段落