码迷,mamicode.com
首页 > 其他好文 > 详细

jade模板引擎简明用法

时间:2014-08-18 20:26:02      阅读:310      评论:0      收藏:0      [点我收藏+]

标签: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 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>

 

 
 

jade模板引擎简明用法,布布扣,bubuko.com

jade模板引擎简明用法

标签:style   blog   color   使用   for   ar   art   div   

原文地址:http://www.cnblogs.com/xuntu/p/3920279.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!