06-nunjucks模板语法
宰父志新
循环语句
// 网页
<body>
<h1>模板语法</h1>
<p>{{title}}</p>
<ul>
{% for student in studentList %}
<li>{{student}}</li>
{% endfor %}
</ul>
//后台
router.get("/",async ctx =>{
let studentList = ["A","B","C","D"]
await ctx.render("index",{
title:"首页",
studentList
})
});
studentList是简写 全写是studentList：studentList前端在ul标签内，li标签外{{%for a in list%}} 结尾在li外，ul内写{{endfor}}结束for循环
条件判断 判断是否登录
// 前台
{% if isLogin %}
<p>欢迎你：{{username}}</p>
{% else %}
<p>请登录...</p>
{% endif %}
//后台
let studentList = ["小明","小红","小黄"];
await ctx.render("one", {
title: "hello nunjucks!",
studentList,
isLogin: true,
username: "amdin"模板继承
让其它的页面，继承模板页面的公共部分
公共部分新建被继承页面 然后在结尾写 {% block content %} {% endblock %}
在继承的页面删掉body以及html的内容 只留下中间{% extends "路径" %}来引入继承被继承的页面，在继承页面顶部使用{% block content %}，内容结尾添加{% endblock %}以此来达到继承的效果。
// 公共部分
<body>
<div>
<a href="">首页</a>
<a href="/images">图片</a>
<a href="/video">视频</a>
</div>
{% block content %} {% endblock %}
</body>
// 继承部分
{% extends "./views/layout.html" %}
{% block content %}
<h1>模板语法</h1>
<!-- 循环语句 -->
<ul>
{% for student in studentList %}
<li>{{student}}</li>
{% endfor %}
</ul>
<!-- 条件判断 -->
{% if isLogin %}
<p>欢迎你：{{username}}</p>
{% else %}
<p>请登录...</p>
{% endif %}
{% endblock %}include
某些页面可能会包含相同的组件，例如页脚、侧边栏，可以通过include引入
{% extends "./views/layout.html" %}
{% block content %}
<h1>模板语法</h1>
<!-- 循环语句 -->
<ul>
{% for student in studentList %}
<li>{{student}}</li>
{% endfor %}
</ul>
<!-- 条件判断 -->
{% if isLogin %}
<p>欢迎你：{{username}}</p>
{% else %}
<p>请登录...</p>
{% endif %}
{% include "./views/footer.html" %}
{% endblock %}
类似资料：