- 在 Express 中调用 jade 模板引擎
- jade 变量调用
- if 判断
- 循环
- Case 选择
- 在模板中调用其他语言
- 可重用的 jade 块 (Mixins)
- 模板包含 (Includes)
- 模板引用 (Extends)
express 中使用ejs 基础教程:https://blog.csdn.net/maindek/article/details/82669720
在 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 种方式
- #{表达式}
- =表达式
- !=表达式
注意:符号 - 开头在 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"