更新更強大的網頁設計師好幫手 Fire.app 進階篇
- 2012-06-03
- 19693
- 0
- Fire.appAndCompass.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 樣板語言,如果想深入了解可以參考:
- http://ruby-doc.org/stdlib-1.9.3/libdoc/erb/rdoc/ERB.html
- http://rrn.dk/rubys-erb-templating-system
- http://www.stuartellis.eu/articles/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 有兩種方法:
- 使用對應目錄中的 layout 檔案
- 指定想套用的 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 官網 購買~
回應討論