一、Nunjucks模板语法

在Nunjucks模板入门[/pages/d9664c/],可以通过render方法来指定渲染的模板的基础用法，此外它还可以向模板传递数据，能够展示更丰富的网页效果。

二、循环语句

对于多条类型相同的数据，往往会用数组进行存储，通过循环语句可以动态展现数据列表。

服务端数据传递：

router.get('/', async ctx => {
    let studentList = ['xiaomi', 'xiaohong', 'xiaozhang']
    await ctx.render('index',{
        studentList,
    })
})

模板html文件使用循环语句展现数据,可以得到多条数据的列表：

<ul>
    {% for student in studentList %}
    <li>{{ student }}</li>
    {% endfor %}
</ul>

三、分支语句

在网页中，需要判断用户的登陆状态来展现不同的页面；即页面的内容取决于用户的状态，因此可以使用分支语句制作。

服务端将用户是否登陆状态传递给模板：

await ctx.render('index',{
        studentList,
        isLogin:true,
})

模板html文件根据状态展现不同内容：

{% if isLogin %}
    <p>欢迎{{ username }}</p>
{% else %}
    <p>请登陆</p>
{% endif %}

四、模板继承

对于网页来说，页面的头部是公用的，都有相同的导航栏，可以用模板继承功能将公共的部分提取出来，这样更有利于代码复用。

首先新建公共部分views/layout.html，

<div>
    <a href="/">首页</a>
    <a href="/images">图片</a>
    <a href="/video">视频</a>
</div>
{% block content %}
{% endblock %}

其他要使用layout布局的页面可以直接继承layout布局：

views/index.html:

{% extends './views/layout.html' %}
{% block content %}
    <h1>模板继承</h1>
    <p>{{ title }}</p>
{% endblock %}

views/images.html

{% extends './views/layout.html' %}
{% block content %}
    <h1>图片页面</h1>
{% endblock %}

配置完路由后，点击不同导航，导航栏可以复用。

五、include 语法

对于需要复用的页面模板，但是并不是每个页面都需要使用的，可以使用include 语法,在需要引入的页面引入即可。

比如在首页页面引入页脚：

{% extends './views/layout.html' %}
{% block content %}
{% include './views/footer.html' %}
{% endblock %}