Nunjucks 丰富而强大的 JavaScript 模板语言 - 文章教程

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

发布于 2021-09-26 字数 3528 浏览 871 评论 0

您一直在寻找更复杂的 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 让我们的应用感觉很原生。

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

Mozilla Webmaker

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

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

Apostrophe CMS

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

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

更多例子

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

{{ 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>

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2512 文章
30 评论
81917 人气
更多

推荐作者

qq_iQVWB

文章 0 评论 0

gyhjy

文章 0 评论 0

dianjvnan

文章 0 评论 0