Jade模板引擎入门教程

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

其它语言实现

安装

通过npm：

1 2	`<span style="font-size: 13px;">npm install jade` `</span>`

浏览器支持

可以通过下面命令将jade编译为客户端浏览器兼容的文件：

1 2	`<span style="font-size: 13px;">$ make jade.js` `</span>`

或者，如果你已经通过npm安装了uglifyjs（npminstalluglify-js），可以通过下面的命令同时创建两个文件：

1 2	`<span style="font-size: 13px;">$ make jade.min.js` `</span>`

公开API

var jade = require('jade');

// 渲染字符串
jade.render('.csser.com 字符串', { options: 'here' });

// 渲染文件
jade.renderFile('path/to/csser.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.

标记

标记是一行的第一个单词：

1 2	`<span style="font-size: 13px;">html` `</span>`

会被转换为 <html></html>

标记也可以有id：

1 2	`<span style="font-size: 13px;">div#container` `</span>`

这将被渲染成<div id=”container”></div>

如何处理类？

1 2	`<span style="font-size: 13px;">div.user-details` `</span>`

渲染为: <div class=”user-details”></div>

多个class？并且还有id？

1 2	`<span style="font-size: 13px;">div#foo.bar.baz` `</span>`

渲染为：<div id=”foo” class=”bar baz”></div>

总写div确实很烦人，可以省略之：

<span style="font-size: 13px;">#foo

.bar

</span>

输出： <div id=”foo”></div><div class=”bar”></div>

标记文本

只需要将文本内容放在标记后面：

1 2	`<span style="font-size: 13px;">p wahoo!` `</span>`

渲染为 <p>wahoo!</p>.

酷，但是如何处理大段文本呢？

<span style="font-size: 13px;">p

| foo bar baz

| rawr rawr

| super cool

| go jade go

</span>

渲染为 <p>foo bar baz rawr…..</p>

内插法？是的，这两种类型的文本都可以使用内插法，如果我们传入{ locals: { name: ‘一回’, email: ‘xianlihua[at]gmail.com’ }}，可以这样做：

1 2	`<span style="font-size: 13px;">#user #{name} <#{email}>` `</span>`

输出：<div id=”user”>一回 <xianlihua[at]gmail.com></div>

出于某种原因需要输出#{}？转义之：

1 2	`<span style="font-size: 13px;">p \#{CSSer, 关注Javascript技术}` `</span>`

这样就得到了：<p>#{CSSer, 关注Javascript技术}</p>

也可以使用反转义变量!{html}，下面的代码将输出script标记：

<span style="font-size: 13px;">- var html = "<script></script>"

| !{html}

</span>

包含文本的嵌套标记也可以使用文本块：

<span style="font-size: 13px;">label

| Username:

input(name='user[name]')

</span>

或者直接使用标记文本:

<span style="font-size: 13px;">label Username:

input(name='user[name]')

</span>

只接受纯文本的标记，如script,style,以及textarea不需要开头的|字符，例如：

<span style="font-size: 13px;"> html

head

title CSSer, 关注Web前端技术

script

if (foo) {

bar();

} else {

baz();

}

</span>

再次作为替代方案，我们可以使用点号’.'来表示一个文本块，例如：

<span style="font-size: 13px;"> p.

foo asdf

asdf

asdfasdfaf

asdf

asd.

</span>

输出:

<span style="font-size: 13px;"> <p>foo asdf

asdf

asdfasdfaf

asdf

asd

.

</p>

</span>

如果点号’.'与标记之间有空格，Jade解析其会忽略它，将其作为文本处理：

1 2	`<span style="font-size: 13px;">p .` `</span>`

输出:

1 2	`<span style="font-size: 13px;"><p>.</p>` `</span>`

注释

单行注释当前看起来与Javascript一致，即“//”，单行注释的内容必须放在同一行上：

<span style="font-size: 13px;">// 一些段落

p foo

p bar

</span>

将会输出：

<span style="font-size: 13px;">

<p>foo</p>

<p>bar</p>

</span>

Jade也支持非缓冲注释，只需增加一个横杠：

<span style="font-size: 13px;">//- 该行注释将不会被输出到解析后的页面中

p foo

p bar

</span>

输出：

<span style="font-size: 13px;"><p>foo</p>

<p>bar</p>

</span>

块注释

块注释会依据缩进进行处理：

<span style="font-size: 13px;"> body

//

#content

h1 CSSer,关注Web前端技术

</span>

输出：

<span style="font-size: 13px;"><body>

<!--

<div id="content">

<h1>CSSer,关注Web前端技术</h1>

</div>

-->

</body>

</span>

Jade也支持条件注释，例如：

<span style="font-size: 13px;">body

/if IE

a(href='http://www.mozilla.com/en-US/firefox/') Get Firefox

</span>

输出:

<span style="font-size: 13px;"><body>

<!--[if IE]>

<a href="http://www.mozilla.com/en-US/firefox/">Get Firefox</a>

<![endif]-->

</body>

</span>

嵌套

Jade支持通过嵌套来以自然的方式定义标记：

<span style="font-size: 13px;">ul

li.first

a(href='#') foo

li

a(href='#') bar

li.last

a(href='#') baz

</span>

块扩展

块扩展允许创建单行的简洁嵌套标记，下面的示例与上例输出相同：

<span style="font-size: 13px;"> ul

li.first: a(href='#') foo

li: a(href='#') bar

li.last: a(href='#') baz

</span>

特性

目前Jade支持’(‘和’)'的特性定界符。

1 2	`<span style="font-size: 13px;">a(href='/login', title='View login page') Login` `</span>`

另外我们也可以使用冒号（:）来作为分割符：

1 2	`<span style="font-size: 13px;">a(href: '/login', title: '注册成为CSSer.com会员') Login` `</span>`

Boolean特性也被支持：

1 2	`<span style="font-size: 13px;">input(type="checkbox", checked)` `</span>`

值为变量的Boolean特性只有在值为true时输出：

1 2	`<span style="font-size: 13px;">input(type="checkbox", checked: someValue)` `</span>`

分拆在多行也能正常解析：

<span style="font-size: 13px;">input(type='checkbox',

name='agreement',

checked)

</span>

文档类型

利用!!!来增加页面的文档类型：

1 2	`<span style="font-size: 13px;">!!!` `</span>`

将会输出过渡型文档类型，然而：

1 2	`<span style="font-size: 13px;">!!! 5` `</span>`

将会输出HTML5的文档类型，下面是默认定义的文档类型，这也可以很容易的被扩展：

var doctypes = exports.doctypes = {
   '5': '<!DOCTYPE html>',
   'xml': '<?xml version="1.0" encoding="utf-8" ?>',
   'default': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
   'transitional': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
   'strict': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',
   'frameset': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">',
   '1.1': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">',
   'basic': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">',
   'mobile': '<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">'
};

要修改默认值只需改变：

1 2	`<span style="font-size: 13px;">jade.doctypes.default = 'whatever you want';` `</span>`

过滤器

过滤器以冒号（:）作为前缀，如 :markdown 将会对文本进行函数处理，（一回注：类似Smarty的变量调节器），本页开始处列出了目前Jade支持的过滤器。

<span style="font-size: 13px;">body

:markdown

Woah! jade _and_ markdown, very **cool**

we can even link to [CSSer](http://www.csser.com)

</span>

渲染后:

1 2	`<span style="font-size: 13px;"> <body><p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even link to <a href="http://www.csser.com">CSSer</a></p></body>` `</span>`

过滤器也可以处理解析树，通常过滤器可以正常处理文本块，但是通过传入规则的块过滤器可以做任何它能做的。

<span style="font-size: 13px;">body

conditionals:

if role == 'admin'

p You are amazing

else

p Not so amazing

</span>

代码

Jade目前支持三种类型的可执行代码，第一种以-为前缀，不会被缓冲：

1 2	`<span style="font-size: 13px;">- var foo = 'bar';` `</span>`

这可被用于条件或循环：

<span style="font-size: 13px;">- for (var key in obj)

p= obj[key]

</span>

由于Jade的缓冲技术，下面的代码是有效的：

<span style="font-size: 13px;">- if (foo)

ul

li yay

li foo

li worked

- else

p oh no! you are not in csser.com

</span>

甚至详细的迭代循环：

<span style="font-size: 13px;">- if (items.length)

ul

- items.forEach(function(item){

li= item

- })

</span>

任何你希望的都可以实现！

接下来我们转义了缓冲代码，用于缓冲返回值，以等号（=）作为前缀：

<span style="font-size: 13px;">- var foo = 'bar'

= foo

h1= foo

</span>

输出： bar<h1>bar</h1>. 被’='缓冲的代码会默认经过转义以增强安全性，要输出为转义的值需要使用 !=：

1 2	`<span style="font-size: 13px;">p!= aVarContainingMoreHTML` `</span>`

一个允许使用”vanilla”Javascript的例外，是 – each 标记，其表现形式为：

1 2	`<span style="font-size: 13px;">- each VAL[, KEY] in OBJ` `</span>`

实现循环数组的例子：

<span style="font-size: 13px;">- var items = ["one", "two", "three"]

- each item in items

li= item

</span>

输出:

<span style="font-size: 13px;"><li>one</li>

<li>two</li>

<li>three</li>

</span>

循环对象的键和值：

<span style="font-size: 13px;">- var obj = { foo: 'bar' }

- each val, key in obj

li #{key}: #{val}

</span>

这会输出 <li>foo: bar</li>

也可以进行嵌套循环：

<span style="font-size: 13px;">- each user in users

- each role in user.roles

li= role

</span>

当一个属性为undefined，Jade会输出空串，例如：

1 2	`<span style="font-size: 13px;">textarea= user.signature` `</span>`

近期的Jade版本会输出空字符串而不是undefined：

1 2	`<span style="font-size: 13px;"><textarea></textarea>` `</span>`

命令行工具：bin/jade

输出html到标准输出（stdout）：

1 2	`<span style="font-size: 13px;">jade examples/*.jade --pipe` `</span>`

生成 examples/*.html ：

1 2	`<span style="font-size: 13px;">jade examples/*.jade` `</span>`

传入参数：

1 2	`<span style="font-size: 13px;">jade examples/layout.jade --options '{ locals: { title: "CSSer" }}'` `</span>`

posted @ 2017-06-03 12:00 赵哲丽阅读(459) 评论(0) 编辑收藏举报

刷新页面返回顶部

赵哲丽

Jade模板引擎入门教程

Jade是一款高性能简洁易懂的模板引擎，Jade是Haml的Javascript实现，在服务端（NodeJS）及客户端均有支持。

功能

其它语言实现

安装

浏览器支持

公开API

Options

语法

行尾

标记

标记文本

注释

块注释

嵌套

块扩展

特性

文档类型

过滤器

代码

命令行工具：bin/jade

公告