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路徑

 

四、繼承

extends jade路徑

 

五、註釋

//  單行註釋或下一行嵌套的文本都爲註釋

 

六、mixins

減小重複工做的利器，定義一個任務塊

 1 mixin article(title)
 2   .article
 3     .article-wrapper
 4       h1= title
 5       if block
 6         block
 7       else
 8         p No content provided
 9 
10 +article('Hello world')
11 
12 +article('Hello world')
13   p This is my
14   p Amazing article

渲染後變爲

 1 <div class="article">
 2   <div class="article-wrapper">
 3     <h1>Hello world</h1>
 4     <p>No content provided</p>
 5   </div>
 6 </div>
 7 <div class="article">
 8   <div class="article-wrapper">
 9     <h1>Hello world</h1>
10     <p>This is my</p>
11     <p>Amazing article</p>
12   </div>
13 </div>