目录
3.2.7使用”-”来定义变量及两种输出方式: p=str； p #{str}
3.2.8通过 #{variable} 插值表达式输出相应的变量值
3.2.12判断语句：”if else” 和 case when default
3.2.13mixin：混合模式（宏模式）及灵活使用（变量调用）
4.3nunjucks的语法使用——变量{{username}}
4.7nunjucks的语法使用——过滤器replace() 和capitalize(整个变量首字母大写)
4.8nunjucks的语法使用——模板继承block/extends
4.10nunjucks的语法使用——include/import
1.知识点及课堂目标
知识要点
- 模板引擎
- pug模板引擎（安装pug、循环、判断、混合模式(宏模式mixin)、插值表达式）
- nunjucks模板引擎（koa-nunjucks-2模块的使用，nunjucks在koa中的使用，nunjucks使用中的常用语法）
课堂目标
- 了解模板引擎
- 学会pug模板引擎的常用语法
- 了解nunjucks模板引擎的常用语法
- 会在koa中使用pug和nunjucks模板引擎
2.模板引擎
模板引擎：模板引擎是web应用中动态生成html的工具，负责将数据和模板结合；常见模板引擎有：ejs、jade（现更名为pug）、Handlebars、Nunjucks、Swig等；使用模板引擎可以是项目结构更加清晰，结构更加合理，让项目维护变得更简单；
如果不使用模板引擎，可以直接使用koa-static，直接读取static文件夹下的html文件页面。
3.pug模板引擎使用
3.1安装pug
npm i pug -g
3.2pug常用语法
3.2.1通过缩进关系，代替以往html的层级包含关系。
注意要统一使用tab或者空格缩进，不要混用。
index.js:
const App = require("koa");
const Router = require("koa-router");
const views = require("koa-views");
const app = new App();
const router = new Router();
// 注意views的写法和用法
app.use(views(__dirname+"/views"),{
map:{
html:"pug"
}
});
router.get("/index",async cxt=>{
// cxt.body = "hello";
await cxt.render("index.pug");
});
app.use(router.routes());
app.listen("8989");index.pug：pug模板引擎通过tab和空格进行缩进，注意不要混用
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title Document
body
h1 我是pug标题 
3.2.2html 元素属性/style行间样式
html 元素属性通过在标签右边通过括号包含（可以通过判断来添加）；style行间样式在属性括号内书写和html中一致
注意style行间属性时，遇到"background-color"这种有 “-”的属性时必须加引号或者写成background：“red”，否则报错
//- class属性
div(class="mydiv1") 我是mydiv1
//- id属性
div(id="mydiv2") 我是id为mydiv2的div
//- style行间样式属性
div(style={width:"100px",height:"100px","background-color":"red"}) 
3.2.3div或其他标签简写
//- div简写
.mydiv3 我是mydiv3
#mydiv4 我是id为mydiv4的div
//- 其他标签简写：a标签内class="btn"
a.btn
img#myImg
3.2.4内联书写层级,a: img
注意：a: 和img层级间必须有空格
//- 内联书写层级,a: img
a: img(alt="这是图片") 
3.2.5style样式表书写
注意：style后加“.”，注意层级关系，样式书写与html中一致
style.
.mydiv1{
width:100px;
height:100px;
background:green;
} 
3.2.6文本通过在 字前 添加竖线符号“|”使原样输出
- 文本通过在 字前 添加竖线符号“|”可让 jade 原样输出内容 ；
- 在html标签标记后，通过空格隔开文本内容；
- 在html标签标记后通过添加引号“.”添加块级文本 ；
//- 文本通过在 字前 添加竖线符号“|”使原样输出
div
//- 我是div 文本包含中文会直接报错
//- 文本全英文会直接生成<hello>标签
hello
//- 想让文本原样输出，必须使用 “|”转义
| hello my dear!
//- 在html标签标记后通过添加引号“.”添加块级文本 ；
div ".我爱你" ".我爱你" ".我爱你"".我爱你" 
3.2.7使用”-”来定义变量及两种输出方式: p=str； p #{str}
使用”-”来定义变量。两种输出方式：使用“=”把变量输出到元素内，如p=str； 使用插值表达式 #{变量}
//- 使用”-”来定义变量。两种输出方式：使用“=”把变量输出到元素内，如p=str； 使用插值表达式 #{变量}
- let str = "你好"
p #{str}
p=str 
3.2.8通过 #{variable} 插值表达式输出相应的变量值
示例见3.2.7
3.2.9注释
pug中注释：可以使用html中原有的注释方式，可以在生成的html中看到注释内容；也可以使用pug自带的注释方式，看不到注释内容。
html中原有注释方式 (//)：
//- html原有注释方式，可以在生成的html中看到
// 这是html单行注释
//
这是html多行注释第一行
这是html多行注释第二行
pug自带注释方式：
//- pug自带注释方式
//- 这是pug单行注释
//-
这是pug多行注释第一行
这是pug多行注释第二行3.2.10循环：each val in [1,2,3]
使用koa框架推送数据给pug
router.get("/index",async cxt=>{
// cxt.body = "hello";
await cxt.render("index.pug",{
// 将数据推送给pug
users:[{name:"zs",age:25},{name:"ls",age:26},{name:"ww",age:28}]
});
});index.pug文件：注意pug中通过缩进表示标签闭合 ；each 变量多个用逗号隔开，如 each user,index in users
//- each in 循环
ul
each user,index in users
li 姓名是：#{user.name}; 年龄是：#{user.age} --------------#{index} 
3.2.11for循环：不需要{}
//- for 循环
- for(let i=0;i<4;i++)
span 我是for循环的 #{i}
3.2.12判断语句：”if else” 和 case when default
if else 判断：
//- if else 判断
- let num = 5;
if num > 10
div num大于10
else
div num小于10 
case when default：
- let num = 3;
//- case when default 判断
case num
when 1
p num为1
when 2
p num为2
when 3
p num为3
default
p num是其他值 
3.2.13mixin：混合模式（宏模式）及灵活使用（变量调用）
类似定义函数，然后进行函数调用
定义宏：
//- 宏模式（混合模式）mixin
//- 定义宏
mixin mydiv
div 我是公共div，通过宏模式创建调用宏（可多次调用）：通过 +宏名称 进行调用
//- 调用宏
+mydiv
+mydiv
宏模式的灵活使用：
//- 宏模式灵活使用
mixin pet(name,sex)
p 这是一只#{name}，它是#{sex}的。
+pet("狗狗","公")
+pet("猫咪","母")
3.2.14include common/footer.pug 通过include引入外部文件
会同时引入各种头信息
//- include引入外部文件
include common.pug 
3.2.15script标签
标签最后需要有"."：script(type="text/javascript").
//- script标签
script(type="text/javascript").
console.log("js输出内容");//js输出内容3.3练习工具 hade及用法
npm i hade -g
使用时直接在控制台输入hade后，就会在浏览器中打开以下页面，可以在此将写好的html转为pug模板文件。
4.nunjucks模板引擎在koa中的应用
在书写上pug模板引擎对html不友好，需要使用tab或空格表示缩进；但是nunjucks标签写法和html一致，只是有自己特有的语法。
4.1安装koa-nunjucks-2
注意nunjucks不再使用koa-views模块加载静态页面，而是使用koa-nunjucks-2引入。
安装命令： npm i koa-nunjucks-2 -S
4.2使用nunjucks
推荐使用”.njk“后缀名，但是也可以使用html后缀
使用koa-nunjucks-2引入页面，需要进行配置，ext表示模板后缀，path表示视图路径，nunjucksConfig:{trimBlocks:true}用于防止xss漏洞。
index.js：
- nunjucks不再使用koa-views引入静态文件，而是使用koa-nunjucks-2；
- 使用koa-nunjucks-2后各种配置的写法；
- nunjucks和pug不一样，此处render方法中，因为设置了ext后缀，所以不需要再写文件后缀
const App = require("koa");
const Router = require("koa-router");
// 注意nunjucks不再使用koa-views引入静态文件，而是使用koa-nunjucks-2
const nunjucks = require("koa-nunjucks-2");
const app = new App();
const router = new Router();
// 注意nunjucks代替views的写法及配置
app.use(nunjucks({
ext:".njk", //nunjucks推荐使用.njk后缀，但是也可以使用html
path:__dirname+"/views", //页面路径
nunjucksConfig:{
trimBlocks:true //用于防止页面xss攻击
}
}));
router.get("/index",async cxt=>{
// cxt.body = "hello";
// 注意：nunjucks和pug不一样，此处render方法中，因为设置了ext后缀，所以不需要再写文件后缀
await cxt.render("index",{
data:"这是数据",
// 将数据推送给pug
users:[{name:"zs",age:25},{name:"ls",age:26},{name:"ww",age:28}]
});
});
app.use(router.routes());
app.listen("8989");index.njk：标签写法和html一模一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</style>
</head>
<body>
<div>
这是njk文件
{{data}}
</div>
</body>
</html>4.3nunjucks的语法使用——变量{{username}}
router.get("/index",async cxt=>{
await cxt.render("index",{
data:"这是数据"
});
}); <div>
{{data}}
</div>4.4nunjucks的语法使用——注释
{# Loop through all the users #}
和pug一样，nunjucks也有两种注释方式，会显示在页面结构中；html原有注释方式和nunjucks特有的注释方式，不会显示在页面结构中。
<!-- html单行注释 -->
<!--
html多行注释
html多行注释
-->
{# nunjucks单行注释 #}
{#
nunjucks多行注释
nunjucks多行注释
#} 
4.5nunjucks的语法使用——if
nunjucks所有数据有后台进行推送
router.get("/index",async cxt=>{
await cxt.render("index",{
num:4
});
}); {# if elseif else endif判断语句 ,所有nunjucks中的语句都必须有结束标识#}
{% if num>3 %}
<p>num值大于3</p>
{% elseif num<3 %}
<p>num值小于3</p>
{% else %}
<p>num值等于3</p>
{# 所有nunjucks中的语句都必须有结束标识 #}
{% endif %}
4.6nunjucks的语法使用——for in循环
router.get("/index",async cxt=>{
await cxt.render("index",{
users:[{name:"zs",age:25},{name:"ls",age:26},{name:"ww",age:28}]
});
}); {# for in循环 #}
<ul>
{% for user in users %}
<li>名字是：{{user.name}}，性别是：{{user.age}}</li>
{% endfor %}
</ul>4.7nunjucks的语法使用——过滤器replace() 和capitalize(整个变量首字母大写)
替换一段文字等，官网有很多种过滤器写法，可多个过滤器并列书写。
router.get("/index",async cxt=>{
await cxt.render("index",{
str:"hello world!"
});
}); {# 过滤器：替换一段文字等，官网有很多种过滤器写法，可多个过滤器并列书写。 将world替换成 my world ,并且将首字母大写capitalize#}
{{ str | replace("world","my world") | capitalize}} 
4.8nunjucks的语法使用——模板继承block/extends
4.8.1定义父类模板
parent.html：
<div>
<p>我是父级模板</p>
{# left right为自定义变量 #}
{% block left %}
左边内容
{% endblock %}
{% block right %}
右边内容
{% endblock %}
{% block somevalue %}
somevalue 数据
{% endblock %}
</div>4.8.2继承父类模板
index.js：注意除了继承的父级模内容和自己更改的内容，其他内容都会被覆盖掉
需要获取父级模板中的数据时，通过{{super()}}即可获取
{# 继承父级模板:注意除了继承的父级模内容和自己更改的内容，其他内容都会被覆盖掉 #}
{% extends 'parent.html' %}
{% block left %}
左边内容son
{% endblock %}
{% block right %}
右边内容son
{% endblock %}
{% block somevalue %}
{{ super() }}
{% endblock %}4.9nunjucks的语法使用——Macro（宏标签）
Macro（宏标签）可以定义可复用的内容，类似与编程语言中的函数
4.9.1定义
可以给macro的函数给出默认值
{# macro宏标签 #}
{% macro pet(name="老鼠",sex="母") %}
<p>我是一只{{name}},我的性别是{{sex}}
{# 注意一定要有结束标签endmacro #}
{% endmacro %}4.9.2调用
{{pet("狗狗","公")}}
{# 不给参数，输出默认值 #}
{{pet()}}
4.10nunjucks的语法使用——include/import
4.10.1include 引入文件
footer.html:
<div>
这是footer文件
</div>index.njk
{% include "footer.html" %} 
4.10.2import 导入文件
import可引入变量或函数
- 定义:import.html
{% macro pet(name,sex) %}
<p>这是一只{{name}},性别是{{sex}}</p>
{% endmacro %}
{% macro person(name,sex) %}
<p>姓名是：{{name}},性别是{{sex}}</p>
{% endmacro %}-
调用
{# import引入：可引入变量或函数 #}
{% import 'import.html' as obj %}
{{obj.pet("小老虎","母")}}
{{obj.person("王明","男")}}5.总结
- 什么是模板引擎
- pug/nunjucks模板引擎
- 表达式
- 判断语句
- 循环语句
- 宏模式
- 导入导出
扫一扫
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
