Jade（Pug） 模板引擎使用文档
2024-09-04 17:02:16
本篇内容
- 在 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
最新文章
- Visual Studio 2015 前瞻 属性初始化赋值！
- 初学者对于MVC架构模式学习与理解
- PMP考试
- C#程序实现动态调用DLL的研究（转）
- Python 主要模块和常用方法简览
- HDU 5382 莫比乌斯反演
- iOS开发中的常用宏定义
- [POJ] 1274 The Perfect Stall(二分图最大匹配)
- 大数据时代，我们为什么使用hadoop
- 4. JavaScript 控制语句
- css3实战版的点击列表项产生水波纹动画——之jsoop面向对象封装版
- SSL证书安装指引
- python之路(十)-正则表达式
- HTML 页面自动刷新
- 【读书笔记】iOS-访问网络
- python之约束, 异常处理, md5
- spark 常用技巧总结2
- 使用vue开发微信公众号下SPA站点的填坑之旅
- 牛腩学用MUI做手机APP
- （原创）c++11中 function/lamda的链式调用