Jade 模板引擎使用

简介: 在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模板引用 (Extends) 在 Express 中调用 jade 模板引擎 ...
  • 在 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 模板会被解析成

<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 种方式

    1. #{表达式}
    1. =表达式
    1. !=表达式

注意:符号 - 开头在 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 判断

 

方式1

 

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

 

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

结果

<p>亲爱的 Alan 您并不是 VIP</p>

注意这个 unless 是 jade 提供的关键字,不是运行的 js 代码

循环

 

for 循环

 

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

 

each

同样的 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>

再来搬运一发,原文地址:http://www.lellansin.com/Jade-模板引擎使用.html

相关文章
|
5月前
|
测试技术
33 # 基本模板引擎
33 # 基本模板引擎
18 0
|
6月前
|
JavaScript 容器
【Vue源码解析】mustache模板引擎
【Vue源码解析】mustache模板引擎
32 0
|
4月前
|
前端开发 JavaScript Java
前端最常用的模板引擎-Handlebars
前端最常用的模板引擎-Handlebars
34 0
|
PHP Python
express使用twig做模板引擎
express使用twig做模板引擎
59 0
|
JavaScript 前端开发 中间件
Koa中 引入使用 EJS 模板引擎
Koa中 引入使用 EJS 模板引擎
178 0
|
Java 应用服务中间件
详解模板引擎二
详解模板引擎二
68 0
详解模板引擎二
|
JavaScript 前端开发
Vue 源码之 mustache 模板引擎(一)
Vue 源码之 mustache 模板引擎(一)
443 0
|
JavaScript 前端开发
underscore 系列之实现一个模板引擎(下)
本篇接着上篇 underscore 系列之实现一个模板引擎(上)。
87 0
underscore 系列之实现一个模板引擎(下)
|
JavaScript 前端开发
underscore 系列之实现一个模板引擎(上)
underscore 提供了模板引擎的功能
163 0
underscore 系列之实现一个模板引擎(上)
|
11月前
|
Web App开发 编解码 移动开发
移动端短语音消息音频格式选择
评估音频编码指标,除码率、采样率、和算法延迟以外,还要参考MOS、VBR/CBR、和基础算法等。其中,MOS(Mean OpinionScore)是语音编解码器的主观评估指标。MOS是一个广为接受的有统计意义的主观听音指标。上面音视频编解码器的列表没有把它包含进去,是因为同一个编解码器,在不同码率下,表现出来的MOS值是会变化的。对一个音频编解码器给出一个固定的MOS值,反而会起误导的作用。另外,虽然MOS值已经是主观的听觉测试评估结果,但是音频工程师在选用音频编解码器的时候,还要以自己亲身的听感作为最终的依据。
246 0

相关产品

  • 云迁移中心