jade和ejs很大的不同是通过缩进的方式解决嵌套和成对标签的问题,比较适合有代码洁癖的同学。
jade官方有基础的语法: http://naltatis.github.io/jade-syntax-docs/
安装jade
npm install -g jade
试用:
建立 test.jade
编译
jade test.jade 编译文件
jade -P test.jade 编译成带格式的html文件
jade -P -w test.jade 实时编译
唯一需要记住的就是用统一的缩进来嵌套标签。
jade
doctype html
对应html
<!DOCTYPE html>
jade创建一个列表
ul
li Item A
li Item B
li Item C
对应html
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
jade 设置id和class
#content
.block
input#bar.foo1.foo2
对应html
<div id="content">
<div class="block">
<input id="bar" class="foo1 foo2"/>
</div>
</div>
jade注释
// 这个单行注释会输出到编译后的文件中
p 文本1 //
这个多行注释会输出到编译后的文件中
这个多行注释会输出到编译后的文件中
p 文本2 //-
这个多行注释不会输出到编译后的文件中
这个多行注释不会输出到编译后的文件中
p 文本3
对应html
<!-- 这个单行注释会输出到编译后的文件中-->
<p>文本1</p>
<!--
这个多行注释会输出到编译后的文件中
这个多行注释会输出到编译后的文件中
-->
<p>文本2</p>
<p>文本3</p>
在jade中填写属性:
input(type='checkbox', checked)
对应html
<input type="checkbox" checked="checked"/>
数据传递:
1、在文档中写json
- var course='mei'
h1 #{course}
对应html
<h1>mei</h1>
2、读取独立文件
tiny.json
{
"course":"mei"
}
命令:jade test.jade -P -w -O tiny.json
对应html
<h1>mei</h1>
例子2:再复杂一点的json
{
"movies": [{
"title": "复仇者联盟2",
"_id": 1,
"poster": "http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg"
},
{
"title": "复仇者联盟3",
"_id": 2,
"poster": "http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg"
}
] }
jade
ul
each item in movies
li
a(href="/move/#{item._id}")
img(src="#{item.poster}",alt="#{item.title}")
输出html
<ul>
<li><a href="/move/1"><img src="http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg" alt="复仇者联盟2"/></a></li>
<li><a href="/move/1"><img src="http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg" alt="复仇者联盟3"/></a></li>
</ul>