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 里