使用 Jade 快速製作 HTML Template
如果你用 NodeJS 和『Express Web Framework』來寫網站，又參考官方給的範例程式，『Jade』應該是你首選的 Template Engine。不過 Jade 相當容易，如果你已經很熟悉 HTML，學習它不會是件難事。
Jade 用來表示每一個 HTML Tag 的格式：
使用縮排描述巢狀結構（ 如同 Python）：
賦予 Element 一個 ID 有兩種方式：
引入並使用另一個 Jade 檔案：
賦予 Tag 有多個 Attributes 有兩種方法：
建立 div 元素並指定 ID 的特殊例子，可在開頭省略 div：
後記
在配合使用 Jade 時，當然還會碰到傳入值的情況，以及簡單的判斷式，不過這部份就留給實地操作的人自己去發掘了。 Have fun!
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!
留言
張貼留言