jade模板引擎

最近用jade寫了點東西，以爲挺有趣的，是一個有意思的模板引擎。

好比說，像這樣的結構的html

<span>
    <i class="icon-edit"></i>
    編譯
</span>

在jade裏面只須要寫一句話就行了

span: i.icon-edit 編譯

但我以爲最好用的仍是mixins block

若是要定義一個重複利用的模塊，就像是微博首頁裏顯示的博文

這裏就是重複實現的模塊，在jade裏能夠這樣寫

mixin blog(blogId)
    li
        div
            p #{blogId.passage}
            div
                ul
                    each pic in blogId.pics
                        li(src=#{pic})
        div
            span #{blogId.blogger}
            span #{blogId.date}
            span #{blogId.time}
            span #{blogId.zfamount}
            span #{blogId.plamount}
            span #{blogId.zanamount}   

+blog(blog_123)
+blog(blog_456)

each 能取出每一個 blogId.pics 裏的數據，並根據 blogId.pics 的長度添加同等數量的 li 

jade還有模板繼承和包含的功能

好比說，設定模板layout.jade  那麼每個繼承layout的模板具備了layout設定的數據了

在這裏 index.jade 繼承了 layout 因此 index 文件裏已經有了 header 和 footer 文件了 

在 index 裏包含了模板 pics 那麼 index 文件就有了 pics 模板的內容了

而 block append 能夠追加文件到 style 裏