2011年11月9日 星期三

使用 Jade 快速製作 HTML Template

Standard
如果你用 NodeJS 和『Express Web Framework』來寫網站,又參考官方給的範例程式,『Jade』應該是你首選的 Template Engine。不過 Jade 相當容易,如果你已經很熟悉 HTML,學習它不會是件難事。

Jade 用來表示每一個 HTML Tag 的格式:
<tag>(<attributes>) <inner content>

或是

<tag>(<attributes>)= <inner content>

ex: img(src='/images/logo.jpg')
ex: a(href='http://www.mandice.com/') Mandice
ex: title= This is Jade Example

使用縮排描述巢狀結構( 如同 Python):
Jade 語法:
html
  head
    title= This is Jade Example
  body
    Hello World

結果:
<html>
        <head>
                <title>This is Jade Example</title>
        </head>
        <body>Hello World</body>
</html>

賦予 Element 一個 ID 有兩種方式:
div(id='element1')

或是

div#element1

引入並使用另一個 Jade 檔案:
div#element1= partial('another.jade')

賦予 Tag 有多個 Attributes 有兩種方法:
使用『,』連接多個 Attribute:
img(src='/images/logo.jpg', title='This is a Logo')

使用換行連接多個:
img(
        src='/images/logo.jpg'
        title='This is a Logo'
)

建立 div 元素並指定 ID 的特殊例子,可在開頭省略 div:
#element1(class='test')

後記

在配合使用 Jade 時,當然還會碰到傳入值的情況,以及簡單的判斷式,不過這部份就留給實地操作的人自己去發掘了。 Have fun!