Jade 模板引擎使用

• 在 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); console.log( 'server started on http://127.0.0.1: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 种方式

1. #{表达式}
2. =表达式
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> 变成 &lt;stdio.h&gt;），后者不会，不过博主没试出来不知道什么情况。

除了直接在 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 = 10 case 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 = 1 case 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 html html    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 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

1 2 3 4 5 6 7 8

//- extends 拓展调用 layout.jade extends ../layout block 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 >

转载于:https://www.cnblogs.com/imayi/p/6082518.html