Nunjucks 丰富而强大的 JavaScript 模板语言

Question

您一直在寻找更复杂的 JavaScript 模板引擎。这里就是

• 丰富 强大的语言，具有块继承、自动转义、宏、异步控制等。深受 jinja2 的启发
• 快速和精益 高性能。在浏览器中带有预编译模板的小型 8K gzipped 运行时
• Extensible Crazy 可扩展的自定义过滤器和扩展
• 无处不在 在 node 和所有现代 Web 浏览器中可用，具有全面的预编译选项

{% extends "base.html" %}

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

{% block content %}
<ul>
  {% for name, item in items %}
  <li>{{ name }}: {{ item }}</li>
  {% endfor %}
</ul>
{% endblock %}

谁在使用它？

火狐市场

Nunjucks 允许我们将所有现有模板从 Django 项目移植到更易于管理的地方。通过将我们的模板移动到客户端，传输大小减少，页面响应能力显着提高。我们的 API 提供数据，这意味着我们可以将测试前端与测试后端分离。Nunjucks 让我们的应用感觉很原生。

Mozilla Webmaker

Mozilla 基金会的 Webmaker 鼓励人们去创造。使用 Web 技术，您可以使用强大的实时工具创建视觉丰富的媒体。使用 nunjucks，可以轻松地在模板上进行协作并实现本地化等复杂功能。性能或稳定性没有任何问题。

Apostrophe CMS

P'unk Avenue 选择 Nunjucks 作为 Apostrophe 内容管理系统的模板语言，这是一个面向节点开发人员的开源 CMS。我们选择 Nunjucks 是因为它与 Jinja 和 Twig 语言的密切关系，以及它的测试覆盖率和强大的实现。

更多例子

使用任何内置过滤器来处理变量，甚至创建您自己的过滤器。

{{ foo | title }}
{{ foo | join(",") }}
{{ foo | replace("foo", "bar") | capitalize }}

对任何函数或过滤器 使用关键字参数。

{{ foo(1, 2, bar=3, baz=4) }}
{{ bar | transform(level=2) }}

模板继承允许您以强大的方式重用模板。定义子模板填充的骨架结构。

{% extends "base.html" %}

{% block header %}
<h3>{{ subtitle }}</h3>
{% endblock %}

{% block content %}
<h1>{{ page.title }}</h1>
<p>{{ page.content }}</p>
{% endblock %}

如果您需要在过滤器中进行异步调用， 您甚至可以编写异步模板！利用 asyncAll 并行执行所有迭代，假设 lookup 是异步的。

<h1>Posts</h1>
<ul>
{% asyncAll item in items %}
  <li>{{ item.id | lookup }}</li>
{% endall %}
</ul>

• 项目地址：https://mozilla.github.io/nunjucks/
• 中文文档：https://www.wenjiangs.com/docs/nunjuck-docs