jade模板引擎簡明用法

標籤：style   blog   color   使用   for   ar   art   div   

①、特性首個單詞為標籤，有一些不能識別的標籤可作為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減少重複工作的利器，定義一個任務塊

 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 my14   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>