Nunjucks
JavaScript 专用的功能丰富、强大的模板引擎。
你曾经一直在寻觅的 JavaScript 模板引擎就在这里!
- 功能丰富且强大,并支持块级继承(block inheritance)、自动转义、宏(macro)、异步控制等等。完美继承了 jinja2 的衣钵。
- 快速 & 干练 并且高效。运行时代码经过压缩之后只有 8K 大小, 可在浏览器端执行预编译模板。
- 可扩展 性超强,用户可以自定义过滤器(filter)和扩展模块。
- 到处 可运行,无论是 node 还是任何浏览器都支持,并且还可以预编译模板。
{% 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?
Firefox Marketplace
“Nunjucks 帮助我们移植了 Django 项目中的所有模板,这些模板变得更容易管理了。 通过将模板传输到客户端,传输 体积减少了、页面响应速度显著地提升了。 因为我们通过 API 输出数据,这意味着我们可以 将前端和后端的测试分离开来。 Nunjucks 让我们的应用在体验上更接近原生应用。”
– Matt Basta, Firefox Marketplace team
![](img/marketplace.png)
Mozilla Webmaker
Webmaker 来自 Mozilla 基金会,它鼓励人们去创造。通过 web 技术,你可以通过强大的实时工具创建视觉丰富的媒体内容。 通过使用 nunjucks,开发模板也 可以轻松地协作,实现类似 本地化之类的复杂功能。 nunjucks 在性能和稳定性上完全没问题。
![](img/webmaker.png)
Apostrophe CMS
“P'unk Avenue 选择将 Nunjucks 作为Apostrophe(这是一个面向 node 开发者的开源 CMS)内容管理系统的模板语言。 我们选择 Nunjucks 是因为它与 Jinja 和 Twig 很相似,并且 具有很好的测试覆盖率以及健壮的 实现。”
– Tom Boutell, Senior Developer at P'unk Avenue
![](img/apostrophe.png)
更多实例
内置了大量过滤器(filter)可供直接使用,对变量进行处理,也可以开发自己专属功能。
{{ foo | title }}
{{ foo | join(",") }}
{{ foo | replace("foo", "bar") | capitalize }}
可以对任何函数或过滤器(filter)使用 关键字参数(keyword arguments)。
{{ 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>