note

Appearance

模版语法 ​

js
import nunjucks from "nunjucks";

const env = nunjucks.configure("templates", {
  autoescape: true,
});

const template = env.getTemplate("index.njk");

const user = {
  name: "张三",
  info: {
    age: 20,
    gender: "男",
  },
  likes: ["篮球", "足球", "乒乓球"],
  address: [
    ["重庆", "渝北区", "两江新区鸳鸯街道龙景路1号"],
    ["北京", "东城区", "景山前街4号"],
  ],
};

console.log(template.render(user));

变量 ​

模版语法

njk
<h1>Hello {{ name }}</h1>
js
template.render({ name: "张三" });

渲染结果

html
<h1>Hello 张三</h1>

比较 (Comparisons) ​

和 js 一样

  • ==
  • ===
  • !=
  • !==
  • >
  • >=
  • <
  • <=

逻辑运算符 ​

  • and
  • or
  • not

js 的也能用，只是这些更推荐

过滤器 ​

Nunjucks 提供了一些内置的过滤器，你也可以自定义过滤器。

njk
<h1>Hello {{ likes | join(",") }}</h1>
ts
const user = {
  likes: ["篮球", "足球", "乒乓球"],
};

渲染结果

html
<h1>Hello 篮球,足球,乒乓球</h1>

if ​

njk
{% if hungry %}
  I am hungry
{% elif tired %}
  I am tired
{% else %}
  I am good!
{% endif %}

for ​

个人猜测：nunjucks 会更具 for 的 item 的类型做一些处理。

常规数组 ​

njk
{% for item in likes %}
  <li>{{ item }}</li>
{% else %}
  <li>空数组</li>
{% endfor %}

渲染结果

html
<li>篮球</li>
<li>足球</li>
<li>乒乓球</li>

对象 ​

对象必须使用 key,value 的形式，变量名没有限制，可以是 name,age 等。

njk
{% for key, value in info %}
  <li>{{ key }}: {{ value }}</li>
{% endfor %}

dictsort 过滤器可将对象排序

渲染结果

html
<li>age: 20</li>

<li>gender: 男</li>

二维数组 ​

njk
{% for a, b, c in address %}
  <li>{{ a }}: {{ b }}: {{ c }}</li>
{% endfor %}

渲染结果

html
<li>重庆: 渝北区: 两江新区鸳鸯街道龙景路1号</li>

<li>北京: 东城区: 景山前街4号</li>

loop ​

loop 是内置变量，在 for 中可使用

  • loop.index: 当前循环数 (1 indexed)
  • loop.index0: 当前循环数 (0 indexed)
  • loop.revindex: 当前循环数，从后往前 (1 indexed)
  • loop.revindex0: 当前循环数，从后往前 (0 based)
  • loop.first: 是否第一个
  • loop.last: 是否最后一个
  • loop.length: 总数

asyncEach ​

asyncEach 是一个异步的 for 循环，用于处理异步操作。

一般不使用

asyncAll ​

asyncAll 是 asyncEach 并行版，即保持执行顺序。

raw ​

nunjucks 会处理 {{ 和 }}。

如果不希望 nunjucks 处理 {{ 和 }}，可以使用 raw 标签。

njk
{% raw %}
  {{ 1 + 1 }}
{% endraw %}

渲染结果

html
{{ 1 + 1 }}

去除空白 ​

使用 -

-%} 会去除标签右侧的空白字符 {%- 会去除标签之前的空白字符