demoshop

demo, trying to be the best_

本篇介紹的是 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 官網 購買~

回應討論