jade模板引擎简明用法

①、特性

首个单词为标签，有一些不能识别的标签可作为code，如each for case if else if unless

zen coding风格添加标签，如

.nb#hello 生成 <div class="nb" id="hello"></div>

缩进必须统一使用tab或space，否则会报错

通过缩进来表示嵌套关系，这个很重要！如

a 生成 <p><a></a></p>

②、coding 与 html片段

- 后面接code

#{var} !{var} = var != var 可以在html片段中输出变量值

| 后面接文本

标签. 加了符合. 表示下一行后面嵌套的文本都为纯文本

③、嵌套

include jade路径

4、继承

extends jade路径

5、注释

// 单行注释或下一行嵌套的文本都为注释

6、mixins

减少重复工作的利器，定义一个任务块

 mixin article(title)

   .article

     .article-wrapper

       h1= title

       if block

         block

       else

         p No content provided

 +article('Hello world')

 +article('Hello world')

   p This is my

   p Amazing article

渲染后变为

 <div class="article">

   <div class="article-wrapper">

     <h1>Hello world</h1>

     <p>No content provided</p>

   </div>

 </div>

 <div class="article">

   <div class="article-wrapper">

     <h1>Hello world</h1>

     <p>This is my</p>

     <p>Amazing article</p>

   </div>

 </div>

秒客网