您的位置:首页 > 其它

jade模板引擎简明用法

2014-08-18 19:20 309 查看

①、特性

首个单词为标签,有一些不能识别的标签可作为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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: