njk

发表于 更新于 分类于 ，

参考：https://www.liaoxuefeng.com/wiki/1022910821149312/1100400176397024

参考：http://mozilla.github.io/nunjucks/cn/templating.html

Nunjucks 是 Mozilla 开发的一个纯 JavaScript 编写的模板引擎，既可以用在 Node 环境下，又可以运行在浏览器端。但是，主要还是运行在 Node 环境下，因为浏览器端有更好的模板解决方案，例如 MVVM 框架。

先定义一个基本的网页框架base.html：

1
2
3
4
5
<html><body>
{% block header %} <h3>Unnamed</h3> {% endblock %}
{% block body %} <div>No body</div> {% endblock %}
{% block footer %} <div>copyright</div> {% endblock %}
</body>

base.html定义了三个可编辑的块，分别命名为header、body和footer。子模板可以有选择地对块进行重新定义：

1
2
3
4
5
{% extends 'base.html' %}

{% block header %}<h1>{{ header }}</h1>{% endblock %}

{% block body %}<p>{{ body }}</p>{% endblock %}

然后，我们对子模板进行渲染：

1
2
3
4
5
6
console.log(
  env.render("extend.html", {
    header: "Hello",
    body: "bla bla bla...",
  })
);

输出 HTML 如下：

1
2
3
4
5
<html><body>
<h1>Hello</h1>
<p>bla bla bla...</p>
<div>copyright</div> <-- footer没有重定义，所以仍使用父模板的内容
</body>