- 在 Express 中调用 jade 模板引擎
- jade 变量调用
- if 判断
- 循环
- Case 选择
- 在模板中调用其他语言
- 可重用的 jade 块 (Mixins)
- 模板包含 (Includes)
- 模板引用 (Extends)
转载自http://www.lellansin.com/jade-%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E4%BD%BF%E7%94%A8.html
在 Express 中调用 jade 模板引擎
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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); |
test.jade
|
1
|
p hello jade |
其上的 jade 模板会被解析成
|
1
|
<p>hello jade</p> |
虽然平常我们修改 node.js 代码之后需要重启来查看变化，但是 jade 引擎不在此列，因为是动态加载的，所以我们修改完 jade 文件之后可以直接刷新网页来查看效果的。
如果文本比较长可以使用
|
1
2
3
|
p | foo bar baz
| rawr rawr
|
或者
|
1
2
3
|
p. foo bar baz
rawr rawr
|
两种情况都可以处理为
|
1
|
<p>foo bar baz rawr rawr</p> |
jade 变量调用
jade 的变量调用有 3 种方式
- #{表达式}
- =表达式
- !=表达式
注意：- 开头在 jade 种属于服务端执行的代码
|
1
2
3
4
|
- console.log('hello'); // 这段代码在服务端执行- var s = 'hello world' // 在服务端空间中定义变量p #{s}p= s |
会被渲染成为
|
1
2
|
<p>hello world</p>
<p>hello world</p>
|
以下代码效果相同
|
1
2
3
|
- var s = 'world'p hello #{s}p= 'hello' + s |
方式1可以*的嵌入各个地方
方式2返回的是表达式的值
= 与 != 雷同，据说前者会编码字符串（如 <stdio.h> 变成 <stdio.h>），后者不会，不过博主没试出来不知道什么情况。
除了直接在 jade 模板中定义变量，更常见的应用是在 express 中调用 res.render 方法的时候将变量一起传递进模板的空间中，例如这样：
|
1
2
3
|
res.render(test, { s: 'hello world'
}); |
调用模板的时候，在 jade 模板中也可以如上方那样直接调用 s 这个变量
if 判断
方式1
|
1
2
3
4
5
6
7
|
- var user = { description: '我喜欢猫' }- if (user.description) h2 描述
p.description= user.description
- else h1 描述
p.description 用户无描述
|
结果：
|
1
2
3
4
|
<div id="user">
<h2>描述</h2>
<p class="description">我喜欢猫</p>
</div>
|
方式2
上述的方式有种省略写法
|
1
2
3
4
5
6
7
8
|
- var user = { description: '我喜欢猫' }#user if user.description
h2 描述
p.description= user.description
else
h1 描述
p.description 用户无描述
|
方式3
使用 Unless 类似于 if 后的表达式加上了 ! 取反
|
1
2
3
|
- var user = { name: 'Alan', isVip: false }unless user.isVip p 亲爱的 #{user.name} 您并不是 VIP
|
结果
|
1
|
<p>亲爱的 Alan 您并不是 VIP</p>
|
注意这个 unless 是 jade 提供的关键字，不是运行的 js 代码
循环
for 循环
|
1
2
3
4
5
|
- var array = [1,2,3]ul - for (var i = 0; i < array.length; ++i) {
li hello #{array[i]}
- }
|
结果
|
1
2
3
4
5
|
<ul>
<li>hello 1</li>
<li>hello 2</li>
<li>hello 3</li>
</ul>
|
each
同样的 jade 对于循环液提供了省略 “-” 减号的写法
|
1
2
3
|
ul each val, index in ['西瓜', '苹果', '梨子']
li= index + ': ' + val
|
结果
|
1
2
3
4
5
|
<ul>
<li>0: 西瓜</li>
<li>1: 苹果</li>
<li>2: 梨子</li>
</ul>
|
该方法同样适用于 json 数据
|
1
2
3
|
ul each val, index in {1:'苹果',2:'梨子',3:'乔布斯'}
li= index + ': ' + val
|
结果：
|
1
2
3
4
5
|
<ul>
<li>1: 苹果</li>
<li>2: 梨子</li>
<li>3: 乔布斯</li>
</ul>
|
Case
类似 switch 里面的结果，不过这里的 case 不支持case 穿透，如果 case 穿透的话会报错。
|
1
2
3
4
5
6
7
8
|
- var friends = 10case friends when 0
p you have no friends
when 1
p you have a friend
default
p you have #{friends} friends
|
结果：
|
1
|
<p>you have 10 friends</p>
|
简略写法：
|
1
2
3
4
5
|
- var friends = 1case friends when 0: p you have no friends
when 1: p you have a friend
default: p you have #{friends} friends
|
结果：
|
1
|
<p>you have a friend</p>
|
在模板中调用其他语言
|
1
2
3
4
5
6
|
:markdown # Markdown 标题
这里使用的是 MarkDown 格式
script :coffee
console.log '这里是 coffee script'
|
结果：
|
1
2
3
|
<h1>Markdown 标题</h1>
<p>这里使用的是 MarkDown 格式</p>
<script>console.log('这里是 coffee script')</script>
|
可重用的 jade 块 (Mixins)
|
1
2
3
4
5
6
7
8
9
10
|
//- 申明可重用的块mixin list ul
li foo
li bar
li baz
//- 调用+list()+list() |
结果：
|
1
2
3
4
5
6
7
8
9
10
|
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
|
你也可以给这个重用块制定参数
|
1
2
3
4
5
6
|
mixin pets(pets) ul.pets
- each pet in pets
li= pet
+pets(['cat', 'dog', 'pig']) |
结果：
|
1
2
3
4
5
|
<ul class="pets">
<li>cat</li>
<li>dog</li>
<li>pig</li>
</ul>
|
Mixins 同时也支持在外部传入 jade 块
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
mixin article(title) .article
.article-wrapper
h1= title
//- block 为 jade 关键字代表外部传入的块
if block
block
else
p 该文章没有内容
+article('Hello world')+article('Hello Jade') p 这里是外部传入的块
p 再写两句
|
结果：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div class="article">
<div class="article-wrapper">
<h1>Hello world</h1>
<p>该文章没有内容</p>
</div>
</div>
<div class="article">
<div class="article-wrapper">
<h1>Hello Jade</h1>
<p>这里是外部传入的块</p>
<p>再写两句</p>
</div>
</div>
|
Mixins 同时也可以从外部获取属性。
|
1
2
3
4
|
mixin link(href, name) a(class!=attributes.class, href=href)= name
+link('/foo', 'foo')(class="btn") |
结果：
|
1
|
<a href="/foo" class="btn">foo</a>
|
模板包含 (Includes)
你可以使用 Includes 在模板中包含其他模板的内容。就像 PHP 里的 include 一样。
index.jade
|
1
2
3
4
5
6
7
|
doctype htmlhtml include includes/head
body h1 我的网站
p 欢迎来到我的网站。
include includes/foot
|
includes/head.jade
|
1
2
3
4
|
head title 我的网站
script(src='/javascripts/jquery.js')
script(src='/javascripts/app.js')
|
includes/foot.jade
|
1
2
|
#footer p Copyright (c) foobar
|
调用 index.jade 的结果：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!doctype html><html>
<head>
<title>我的网站</title>
<script src='/javascripts/jquery.js'></script>
<script src='/javascripts/app.js'></script>
</head>
<body>
<h1>我的网站</h1>
<p>欢迎来到我的网站。</p>
<div id="footer">
<p>Copyright (c) foobar</p>
</div>
</body>
</html>
|
模板引用 (Extends)
就绝
layout.jade
|
1
2
3
4
5
6
7
8
9
|
doctype htmlhtml 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
|
1
2
3
4
5
6
7
8
|
//- extends 拓展调用 layout.jadeextends ../layoutblock content h1 文章列表
p 忆贾大山 :将启动新核电项目
p 朴槿惠:"岁月号"船长等人弃船行为等同于杀人
p 普京疑换肤：眼袋黑眼圈全无 *整容疑云
p 世界最大兔子重45斤长逾1米 1年吃2万元食物
|
res.render('article') 的结果：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<html>
<head>
<title>我的网站</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<link type="text/css" rel="stylesheet" href="/css/style.css"></head>
<script src="/js/lib/jquery-1.8.0.min.js" type="text/javascript"></script>
</head>
<body>
<h1>文章列表</h1>
<p>忆贾大山 :将启动新核电项目</p>
<p>朴槿惠:"岁月号"船长等人弃船行为等同于杀人</p>
<p>普京疑换肤：眼袋黑眼圈全无 *整容疑云</p>
<p>世界最大兔子重45斤长逾1米 1年吃2万元食物</p>
</body>
</html>
|