nunjucks-2
尹善
const Koa = require("koa");
const Router = require("koa-router");
const nunjucks = require("koa-nunjucks-2");
let app = new Koa();
let router = new Router();
app.use(nunjucks({
ext : "html", // 官方推荐写成.njk
path : __dirname + "/views",
nunjucksConfig : {
trimBlocks : true // 防止Xss漏洞
}
}));
router.get("/",async ctx=>{
await ctx.render("index",{
username : "校长",
num : 2,
arr : [
{name:"张三",age:20,sex:"男"},
{name:"李四",age:20,sex:"男"},
{name:"王五",age:20,sex:"男"}
],
str : "hello world"
});
})
router.get("/import",async ctx=>{
await ctx.render("import");
});
router.get("/dataDatil",async ctx=>{
await ctx.render("dataDatil",{
num : 2,
arr : [
{name:"张三",age:20,sex:"男"},
{name:"李四",age:20,sex:"男"},
{name:"王五",age:20,sex:"男"}
],
str : "hello world"
});
})
app.use(router.routes());
app.listen(8888);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>我是标题</h1>
<p>用户名：{{username}}</p>
<!-- 正常书写注释即可 -->
{# 我是nunjucks的注释 #}
<!-- if判断 -->
{% if num >3 %}
<p>num值大于3</p>
{% elseif num <3 %}
<div>num值小于3</div>
{% else %}
<span>num值等于3</span>
{% endif %}
<!-- 循环结构 -->
<ul>
{% for item in arr %}
<li>
姓名是{{item.name}};
年龄是{{item.age}};
性别是{{item.sex}}
</li>
{% endfor %}
</ul>
<!-- 正则过滤器 -->
{{str | replace("hello","你好") | capitalize}}
<!-- 备注：nodemon不能检测到html，所以在html中修改内容后，记得重启服务器 -->
<!-- 宏标签 macro -->
{% macro pet(name="猪",sex="公") %}
<p>它是一只{{name}},性别是:{{sex}}</p>
{% endmacro %}
{% macro person(name,age) %}
<div> {{name}} </div>
<h2> {{age}} </h2>
{% endmacro %}
{{pet("小狗","公")}}
{{pet("小猫","母")}}
{{pet()}}
{% include "footer.html" %}
</body>
</html>
import.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{# {% include 'index.html' %} #}
{% import 'index.html' as obj %}
{{obj.pet("郭","公子")}}
{{obj.person("div","h2")}}
</body>
</html>
fotter.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>w我是公共的</h1>
</body>
</html>
dataDtail.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{% import 'index.html' as obj %}
{{obj.person("ding","guangDa")}}
{{obj.pet("猪","母")}}
{% if num>3 %}
<p>num大于3</p>
{% elseif num<3 %}
<div>num小于3</div>
{% else %}
<span>num等于3</span>
{% endif %}
<ul>
{% for item in arr %}
<li>
姓名是{{item.name}};
年龄是{{item.age}};
性别是{{item.sex}}
</li>
{% endfor %}
</ul>
{{str | replace("world","世界")}}
{% macro abc(name,sex) %}
<p> {{name}} </p>
<p> {{sex}} </p>
{% endmacro %}
{{abc("p1","p2")}}
</body>
</html>
类似资料：