本篇内容
在 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 //<p>hello jade</p>
如果文本比较长可以使用
p
| foo bar baz
- | rawr rawr
- // 或
p.
- foo bar baz
- rawr rawr
// 结果为
<p>foo bar baz rawr rawr</p>
标签和属性
传统的 html 标签写尖括号很麻烦, Jade 里可以省略尖括号, 直接写标签名. 标签间的嵌套关系用换行加空格来实现. 紧接在标签名后加上. xx 或 #xx, 就能给标签添加 CSS 类名和 id
- doctype html
- html
- head
- body
- h1.titleClass#titleID My First Jade Page
// 编译出来的结果
- <!DOCTYPE html>
- <html>
- <head></head>
- <body>
- <h1 id="titleID" class="titleClass">My First Jade Page</h1>
- </body>
- </html>
标签属性的正统写法应该是写入 () 括号内, 多个属性用逗号隔开 (css 类名和 id 也可以写入() 括号内)
a(href='http://www.adoctors.cn, target='_blank') 我的主页
// 编译出来的结果
<a href="http://www.adoctors.cn" target="_blank">我的主页</a>
HTML 里最常用的标签就是 div 了, 所以 Jade 提供了第二种简化写法, 如果不写标签名默认就是 div:
.divClass#divID 我是一个 div
// 编译出来的结果
<div id="divID" class="divClass">我是一个 div</div>
这里注意一下 = 默认会转义内容
- p= 'Welcome to wandoujia fe, we want <b>you</b>'
- // 转换为
<p>Welcome to wandoujia fe, we want <b>you</b></p>
如果不想被转义的, 在 = 前面添加!
- p!= 'Welcome to wandoujia fe, we want <b>you</b>'
- // 转换为
<p>Welcome to wandoujia fe, we want <b>you</b></p>
jade 变量调用
{表达式}
= 表达式
!= 表达式
注意: 符号 - 开头在 jade 中属于服务端执行的代码
- - console.log('hello'); // 这段代码在服务端执行
- - var s = 'hello world' // 在服务端空间中定义变量
- p #{s}
- p= s
- // 或
- - var s = 'world'
- p hello #{s}
- p= 'hello' + s
会被渲染成为
- <p>hello world</p>
- <p>hello world</p>
方式 1 可以自由的嵌入各个地方
方式 2 返回的是表达式的值
除了直接在 jade 模板中定义变量, 更常见的应用是在 express 中调用 res.render 方法的时候将变量一起传递进模板的空间中, 例如这样:
- res.render(test, {
- s: 'hello world'
- });
调用模板的时候, 在 jade 模板中也可以如上方那样直接调用 s 这个变量
变量中的特殊字符会被转义, 如:
- - var name = '<script></script>'
- | #{name}
- // 结果
- <script></script>
如要得到不转义的, 用! 替换 #来调用
- - var name = '<script></script>'
- | !{name}
// 结果
<script></script>
| 其实就是管道, 一般也可以定义一段文本
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:(方式 1 的简写)
- - var user = { description: '我喜欢猫' }
- #user
- if user.description
h2 描述
- p.description= user.description
- else
h1 描述
p.description 用户无描述
// 方式 3:
使用 Unless 类似于 if 后的表达式加上了 ! 取反
- //unless 是 jade 提供的关键字
- - var user = { name: 'Alan', isVip: false }
- unless user.isVip
p 亲爱的 #{user.name} 您并不是 VIP
- // 结果
- <p > 亲爱的 Alan 您并不是 VIP</p>
循环
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
- ul
- each val, index in ['西瓜', '苹果', '梨子']
- li= index + ':' + val
- // 或
- ul
- each val, index in {1:'苹果',2:'梨子',3:'乔布斯'}
- li= index + ':' + val
- // 结果
- <ul>
- <li>0: 西瓜</li>
- <li>1: 苹果</li>
- <li>2: 梨子</li>
- </ul>
- 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
在模板中调用其他语言
- :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>
jade 中使用 js
- script
- | window.onload =function(){
- | var box =123;
- | };
解析后为:
- <script>
- window.onload =function(){
- var box =123;
- }
- </script>
更方便的方法:
- script. // 加一个点号, 所有的下一级内容都是原样输出
- window.onload =function(){
- var box =123;
- };
另一种方法: 通过引入方式来
include a.js // 引入 a.js 文件, 格式为字符串, 引用路径不加''
注意不要空格和 tab 混用
中文文档: https://pug.bootcss.com/api/getting-started.html
来源: http://www.bubuko.com/infodetail-2655511.html