Jade 模板引擎使用

[ul]
[li]在 Express 中调用 jade 模板引擎[/li]
[li]jade 变量调用[/li]
[li]if 判断[/li]
[li]循环[/li]
[li]Case 选择[/li]
[li]在模板中调用其他语言[/li]
[li]可重用的 jade 块 (Mixins)[/li]
[li]模板包含 (Includes)[/li]
[li]模板引用 (Extends)[/li]
[/ul]

在 Express 中调用 jade 模板引擎

javascript 代码

test.jade
p hello jade

其上的 jade 模板会被解析成
<p>hello jade</p>

虽然平常我们修改 node.js 代码之后需要重启来查看变化,但是 jade 引擎不在此列,因为是动态加载的,所以我们修改完 jade 文件之后可以直接刷新网页来查看效果的。

如果文本比较长可以使用
p

| foo bar baz
| rawr rawr

或者
p.
foo bar baz
rawr rawr
两种情况都可以处理为

<p>foo bar baz rawr rawr</p>

jade 变量调用

jade 的变量调用有 3 种方式
[ol]
[li]#{表达式}[/li]
[li]=表达式[/li]
[li]!=表达式[/li]
[/ol]
注意:符号 - 开头在 jade 中属于服务端执行的代码

  • console.log('hello'); // 这段代码在服务端执行
  • var s = 'hello world' // 在服务端空间中定义变量
    p #{s}
    p= s
    会被渲染成为

<p>hello world</p>
<p>hello world</p>
以下代码效果相同

  • var s = 'world'
    p hello #{s}
    p= 'hello' + s
    方式1可以自由的嵌入各个地方
    方式2返回的是表达式的值
    = 与 方式3 != 雷同,据说前者会编码字符串,如 <stdio.h> 变成
    <stdio.h>
    后者不会,不过博主没试出来不知道什么情况。

除了直接在 jade 模板中定义变量,更常见的应用是在 express 中调用 res.render 方法的时候将变量一起传递进模板的空间中,例如这样:

res.render(test, {
s: 'hello world'
});
调用模板的时候,在 jade 模板中也可以如上方那样直接调用 s 这个变量

if 判断

<h2>方式1</h2>

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

<div id="user">
<h2>描述</h2>
<p class="description">我喜欢猫</p>
</div>
<h2>方式2</h2>

上述的方式有种省略写法

  • var user = { description: '我喜欢猫' }

user

if user.description
h2 描述
p.description= user.description
else
h1 描述
p.description 用户无描述
<h2>方式3</h2>

使用 Unless 类似于 if 后的表达式加上了 ! 取反

  • var user = { name: 'Alan', isVip: false }
    unless user.isVip
    p 亲爱的 #{user.name} 您并不是 VIP
    结果

<p>亲爱的 Alan 您并不是 VIP</p>
注意这个 unless 是 jade 提供的关键字,不是运行的 js 代码

循环

<h2>for 循环</h2>

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

<ul>
<li>hello 1</li>
<li>hello 2</li>
<li>hello 3</li>
</ul>
<h2>each</h2>
同样的 jade 对于循环液提供了省略 “-” 减号的写法

ul
each val, index in ['西瓜', '苹果', '梨子']
li= index + ': ' + val
结果

<ul>
<li>0: 西瓜</li>
<li>1: 苹果</li>
<li>2: 梨子</li>
</ul>
该方法同样适用于 json 数据

ul
each val, index in {1:'苹果',2:'梨子',3:'乔布斯'}
li= index + ': ' + val
结果:

<ul>
<li>1: 苹果</li>
<li>2: 梨子</li>
<li>3: 乔布斯</li>
</ul>

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
    结果:

<p>you have 10 friends</p>
简略写法:

  • 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
    结果:

<p>you have a friend</p>

在模板中调用其他语言

:markdown

Markdown 标题

这里使用的是 MarkDown 格式
script
:coffee
console.log '这里是 coffee script'
结果:

<h1>Markdown 标题</h1>
<p>这里使用的是 MarkDown 格式</p>
<script>console.log('这里是 coffee script')</script>

可重用的 jade 块 (Mixins)

//- 申明可重用的块
mixin list
ul
li foo
li bar
li baz

//- 调用
+list()
+list()
结果:

<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
你也可以给这个重用块指定参数

mixin pets(pets)
ul.pets

  • each pet in pets
    li= pet

+pets(['cat', 'dog', 'pig'])
结果:

<ul class="pets">
<li>cat</li>
<li>dog</li>
<li>pig</li>
</ul>
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 再写两句
结果:

<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 同时也可以从外部获取属性。

mixin link(href, name)
a(class!=attributes.class, href=href)= name

+link('/foo', 'foo')(class="btn")
结果:

<a href="/foo" class="btn">foo</a>

模板包含 (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 的结果:

<!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)

通过 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’) 的结果:

<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>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复