jade模板引擎简明用法

①、特性

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

 

zen coding风格添加标签，如

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

 

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

 

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

p

    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>