* 在 Express 中调用 jade 模板引擎 * jade 变量调用 * if 判断 * 循环 * Case 选择 * 在模板中调用其他语言 * 可重用的 jade 块 (Mixins) * 模板包含 (Includes) * 模板引用 (Extends) 在 Express 中调用 jade 模板引擎 ------------------------- var express = require('express'); var http = require('http'); var app = express(); app.set('view engine', 'jade'); // 设置模板引擎 app.set('views', __dirname); // 设置模板相对路径(相对当前目录) app.get('/', function(req, res) { res.render('test'); // 调用当前路径下的 test.jade 模板 }) var server = http.createServer(app); server.listen(3002); console.log('server started on http://127.0.0.1:3002/'); test.jade p hello jade 其上的 jade 模板会被解析成

hello jade

虽然平常我们修改 node.js 代码之后需要重启来查看变化，但是 jade 引擎不在此列，因为是动态加载的，所以我们修改完 jade 文件之后可以直接刷新网页来查看效果的。如果文本比较长可以使用 p | foo bar baz | rawr rawr 或者 p. foo bar baz rawr rawr 两种情况都可以处理为

foo bar baz rawr rawr

jade 变量调用 ------------------------- jade 的变量调用有 3 种方式 * 1) `#{表达式}` * 2) =表达式 * 3) !=表达式注意：符号 `-` 开头在 jade 中属于服务端执行的代码 - console.log('hello'); // 这段代码在服务端执行 - var s = 'hello world' // 在服务端空间中定义变量 p #{s} p= s 会被渲染成为

hello world

以下代码效果相同 - var s = 'world' p hello #{s} p= 'hello' + s 方式1可以自由的嵌入各个地方方式2返回的是表达式的值 = 与方式3 != 雷同，据说前者会编码字符串，如变成 <stdio.h> 后者不会，不过博主没试出来不知道什么情况。除了直接在 jade 模板中定义变量，更常见的应用是在 express 中调用 res.render 方法的时候将变量一起传递进模板的空间中，例如这样： res.render(test, { s: 'hello world' }); 调用模板的时候，在 jade 模板中也可以如上方那样直接调用 s 这个变量 if 判断 -------------------------

方式1

- var user = { description: '我喜欢猫' } - if (user.description) h2 描述 p.description= user.description - else h1 描述 p.description 用户无描述结果：

描述

我喜欢猫

方式2

上述的方式有种省略写法 - var user = { description: '我喜欢猫' } #user if user.description h2 描述 p.description= user.description else h1 描述 p.description 用户无描述

方式3

使用 Unless 类似于 if 后的表达式加上了 ! 取反 - var user = { name: 'Alan', isVip: false } unless user.isVip p 亲爱的 #{user.name} 您并不是 VIP 结果

亲爱的 Alan 您并不是 VIP

注意这个 unless 是 jade 提供的关键字，不是运行的 js 代码循环 -------------------------

for 循环

- var array = [1,2,3] ul - for (var i = 0; i < array.length; ++i) { li hello #{array[i]} - } 结果

hello 1
hello 2
hello 3

each

同样的 jade 对于循环液提供了省略 “-” 减号的写法 ul each val, index in ['西瓜', '苹果', '梨子'] li= index + ': ' + val 结果

0: 西瓜
1: 苹果
2: 梨子

该方法同样适用于 json 数据 ul each val, index in {1:'苹果',2:'梨子',3:'乔布斯'} li= index + ': ' + val 结果：

1: 苹果
2: 梨子
3: 乔布斯

Case ------------------------- 类似 switch 里面的结果，不过这里的 case 不支持case 穿透，如果 case 穿透的话会报错。 - var friends = 10 case friends when 0 p you have no friends when 1 p you have a friend default p you have #{friends} friends 结果：

you have 10 friends

简略写法： - var friends = 1 case friends when 0: p you have no friends when 1: p you have a friend default: p you have #{friends} friends 结果：

you have a friend

在模板中调用其他语言 ------------------------- :markdown # Markdown 标题这里使用的是 MarkDown 格式 script :coffee console.log '这里是 coffee script' 结果：

Markdown 标题

这里使用的是 MarkDown 格式

可重用的 jade 块 (Mixins) ------------------------- //- 申明可重用的块 mixin list ul li foo li bar li baz //- 调用 +list() +list() 结果：

你也可以给这个重用块指定参数 mixin pets(pets) ul.pets - each pet in pets li= pet +pets(['cat', 'dog', 'pig']) 结果：

Mixins 同时也支持在外部传入 jade 块 mixin article(title) .article .article-wrapper h1= title //- block 为 jade 关键字代表外部传入的块 if block block else p 该文章没有内容 +article('Hello world') +article('Hello Jade') p 这里是外部传入的块 p 再写两句结果：

Hello world

该文章没有内容

Hello Jade

这里是外部传入的块

再写两句

Mixins 同时也可以从外部获取属性。 mixin link(href, name) a(class!=attributes.class, href=href)= name +link('/foo', 'foo')(class="btn") 结果： foo 模板包含 (Includes) ------------------------- 你可以使用 Includes 在模板中包含其他模板的内容。就像 PHP 里的 include 一样。 `index.jade` doctype html html include includes/head body h1 我的网站 p 欢迎来到我的网站。 include includes/foot `includes/head.jade` head title 我的网站 script(src='/javascripts/jquery.js') script(src='/javascripts/app.js') `includes/foot.jade` #footer p Copyright (c) foobar 调用 index.jade 的结果：我的网站

我的网站

欢迎来到我的网站。

模板引用 (Extends) ------------------------- 通过 Extends 可以引用外部的 jade 块，感觉比 include 要好用 `layout.jade` doctype html html head title 我的网站 meta(http-equiv="Content-Type",content="text/html; charset=utf-8") link(type="text/css",rel="stylesheet",href="/css/style.css") script(src="/js/lib/jquery-1.8.0.min.js",type="text/javascript") body block content `article.jade` //- extends 拓展调用 layout.jade extends ../layout block content h1 文章列表 p 习近平忆贾大山李克强:将启动新核电项目 p 朴槿惠:"岁月号"船长等人弃船行为等同于杀人 p 普京疑换肤：眼袋黑眼圈全无领导人整容疑云 p 世界最大兔子重45斤长逾1米 1年吃2万元食物 res.render('article') 的结果：我的网站

文章列表

习近平忆贾大山李克强:将启动新核电项目

朴槿惠:"岁月号"船长等人弃船行为等同于杀人

普京疑换肤：眼袋黑眼圈全无领导人整容疑云

世界最大兔子重45斤长逾1米 1年吃2万元食物

再来搬运一发，原文地址：[http://www.lellansin.com/Jade-模板引擎使用.html](http://www.lellansin.com/jade-%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E4%BD%BF%E7%94%A8.html)