使用 Jade 快速製作 HTML Template

如果你用 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!

留言

這個網誌中的熱門文章

有趣的邏輯問題:是誰在說謊

Web 技術中的 Session 是什麼?

淺談 USB 通訊架構之定義(一)

淺談 USB 通訊架構之定義(二)

Reverse SSH Tunnel 反向打洞實錄