[翻译]Jade模板引擎中文API，适合入门
Jade是一款高性能简洁易懂的模板引擎，Jade是Haml的Javascript实现，在服务端（NodeJS）及客户端均有支持。
功能
客户端支持
超强的可读性
灵活易用的缩进
块扩展
代码默认经过编码处理以增强安全性
编译及运行时的上下文错误报告
命令行编译支持
HTML5模式（使用!!!5文档类型）
可选的内存缓存
联合动态和静态标记类
利用过滤器解析树的处理
支持 Express JS
利用each透明的循环objects,arrays甚至不可枚举对象
块注释
不需要标记前缀
AST过滤器
过滤器
:sass 需要安装sass.js
:less 需要安装less.js
:markdown 需要安装markdown-js或node-discount
:cdata
:coffeescript 需要安装coffee-script
Vim语法文件
TextMate包
Screencasts
其它语言实现
php
Scala
Ruby
安装
通过npm：
npm install jade
浏览器支持
可以通过下面命令将jade编译为客户端浏览器兼容的文件：
$ make jade.js
或者，如果你已经通过npm安装了uglifyjs（npminstalluglify-js），可以通过下面的命令同时创建两个文件：
$ make jade.min.js
公开API
var jade = require('jade');
// 渲染字符串
jade.render('.saecn.com 字符串', { options: 'here' });
// 渲染文件
jade.renderFile('path/to/saecn.com.jade', { options: 'here' }, function(err, html){
// 这里的options是可选的
// 回调函数可以作为第二个参数
});
// 编译一个函数
var fn = jade.compile('string of jade', options);
fn.call(scope, locals);
Options
执行作用域（this）scope
本地变量对象locals
处理异常及缓存时使用filename
通过文件名将Javascript缓存在内存中cache
输出生成的标记和函数体debug
替换jade默认编译引擎compiler
语法
行尾
在解析前会将 CRLF 和 CR 转换为 LF.
标记
标记是一行的第一个单词：
html
会被转换为 <html></html>
标记也可以有id：
div#container
这将被渲染成
<div id=”container”></div>
如何处理类？
div.user-details
渲染为: <div class=”user-details”></div>
多个class？并且还有id？
div#foo.bar.baz
渲染为：<div id=”foo” class=”bar baz”></div>
总写div确实很烦人，可以省略之：
#foo
.bar
输出： <div id=”foo”></div><div class=”bar”></div>
标记文本
只需要将文本内容放在标记后面：
p wahoo!
渲染为
<p>wahoo!</p>
.
酷，但是如何处理大段文本呢？
p
| foo bar baz
| rawr rawr
| super cool
| go jade go
渲染为
<p>foo bar baz rawr…..</p>
内插法？是的，这两种类型的文本都可以使用内插法，如果我们传入{ locals: { name: ‘一回’, email: ‘xianlihua[at]gmail.com’ }}，可以这样做：
#user #{name} <#{email}>
输出：
<div id=”user”>一回 <saecn[at]gmail.com></div>
出于某种原因需要输出#{}？转义之：
p \#{Saecn, 关注Javascript技术}
这样就得到了：
<p>#{Saecn, 关注Javascript技术}</p>
也可以使用反转义变量!{html}，下面的代码将输出script标记：
– var html = “”
| !{html}
包含文本的嵌套标记也可以使用文本块：
label
| Username:
input(name=’user[name]’)
或者直接使用标记文本:
label Username:
input(name=’user[name]’)
只接受纯文本的标记，如script,style,以及textarea不需要开头的|字符，例如：
html
head
title Saecn, 关注Web前端技术
script
if (foo) {
bar();
} else {
baz();
}
再次作为替代方案，我们可以使用点号’.’来表示一个文本块，例如：
p.
foo asdf
asdf
asdfasdfaf
asdf
asd.
输出:
<p>foo asdf
asdf
asdfasdfaf
asdf
asd
.
</p>
如果点号’.’与标记之间有空格，Jade解析其会忽略它，将其作为文本处理：
p .
输出:
<p>.</p>
注释
单行注释当前看起来与Javascript一致，即“//”，单行注释的内容必须放在同一行上：
// 一些段落
p foo
p bar
将会输出：
<!– 一些段落 –>
<p>foo</p>
<p>bar</p>
Jade也支持非缓冲注释，只需增加一个横杠：
//- 该行注释将不会被输出到解析后的页面中
p foo
p bar
输出：
foo
<p>bar</p>
块注释
块注释会依据缩进进行处理：
body
//
#content
h1 Saecn,关注Web前端技术
输出：
<body>
<!–
<div id=”content”>
<h1>Saecn,关注Web前端技术</h1>
</div>
–>
</body>
Jade也支持条件注释，例如：
body
/if IE
a(href=’http://www.mozilla.com/en-US/firefox/’) Get Firefox
输出:
<body>
<!–[if IE]>
<a href=”http://www.mozilla.com/en-US/firefox/”>Get Firefox</a>
<![endif]–>
</body>
嵌套
Jade支持通过嵌套来以自然的方式定义标记：
ul
li.first
a(href=’#’) foo
li
a(href=’#’) bar
li.last
a(href=’#’) baz
块扩展
块扩展允许创建单行的简洁嵌套标记，下面的示例与上例输出相同：
ul
li.first: a(href=’#’) foo
li: a(href=’#’) bar
li.last: a(href=’#’) baz
特性
目前Jade支持’(‘和’)’的特性定界符。
a(href=’/login’, title=’View login page’) Login
另外我们也可以使用冒号（:）来作为分割符：
a(href: ‘/login’, title: ‘注册成为Saecn.com会员’) Login
Boolean特性也被支持：
input(type=”checkbox”, checked)
值为变量的Boolean特性只有在值为true时输出：
input(type=”checkbox”, checked: someValue)
分拆在多行也能正常解析：
input(type=’checkbox’,
name=’agreement’,
checked)
文档类型
利用!!!来增加页面的文档类型：
!!!
将会输出过渡型文档类型，然而：
!!! 5
将会输出HTML5的文档类型，下面是默认定义的文档类型，这也可以很容易的被扩展：
var doctypes = exports.doctypes = {
‘5’: ‘‘,
‘xml’: ‘‘,
‘default’: ‘‘,
‘transitional’: ‘‘,
‘strict’: ‘‘,
‘frameset’: ‘‘,
‘1.1’: ‘‘,
‘basic’: ‘‘,
‘mobile’: ‘‘
};
要修改默认值只需改变：
jade.doctypes.default = ‘whatever you want’;
过滤器
过滤器以冒号（:）作为前缀，如 :markdown 将会对文本进行函数处理，（一回注：类似Smarty的变量调节器），本页开始处列出了目前Jade支持的过滤器。
body
:markdown
Woah! jade _and_ markdown, very **cool**
we can even link to [Saecn](http://www.saecn.com)
渲染后:
<body><p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even link to <a href="http://www.saecn.com">Saecn</a></p></body>
过滤器也可以处理解析树，通常过滤器可以正常处理文本块，但是通过传入规则的块过滤器可以做任何它能做的。
body
conditionals:
if role == ‘admin’
p You are amazing
else
p Not so amazing
代码
Jade目前支持三种类型的可执行代码，第一种以-为前缀，不会被缓冲：
– var foo = ‘bar’;
这可被用于条件或循环：
– for (var key in obj)
p= obj[key]
由于Jade的缓冲技术，下面的代码是有效的：
– if (foo)
ul
li yay
li foo
li worked
– else
p oh no! you are not in saecn.com
甚至详细的迭代循环：
– if (items.length)
ul
– items.forEach(function(item){
li= item
– })
任何你希望的都可以实现！
接下来我们转义了缓冲代码，用于缓冲返回值，以等号（=）作为前缀：
– var foo = ‘bar’
= foo
h1= foo
输出： bar
bar
. 被’=’缓冲的代码会默认经过转义以增强安全性，要输出为转义的值需要使用 !=：
p!= aVarContainingMoreHTML
一个允许使用”vanilla”Javascript的例外，是 – each 标记，其表现形式为：
– each VAL[, KEY] in OBJ
实现循环数组的例子：
– var items = [“one”, “two”, “three”]
– each item in items
li= item
输出:
<li>one</li>
<li>two</li>
<li>three</li>
循环对象的键和值：
– var obj = { foo: ‘bar’ }
– each val, key in obj
li #{key}: #{val}
这会输出 <li>foo: bar</li>
也可以进行嵌套循环：
– each user in users
– each role in user.roles
li= role
当一个属性为undefined，Jade会输出空串，例如：
textarea= user.signature
近期的Jade版本会输出空字符串而不是undefined：
<textarea></textarea>
命令行工具：bin/jade
输出html到标准输出（stdout）：
jade examples/*.jade --pipe
生成 examples/*.html ：
jade examples/*.jade
传入参数：
jade examples/layout.jade --options '{ locals: { title: "Saecn" }}'
暂无评论