首页 > 代码库 > jade模板引擎简明用法

jade模板引擎简明用法

2024-07-18 06:24:12   226人阅读

①、特性

首个单词为标签，有一些不能识别的标签可作为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>

 

 
 


联系
我们