JSON nunjucks 模板中的数据，使用 gulp-data

Question

我想在 nunjucks "set" 中使用 JSON 数据。一个最小的例子：

index.html

{% set divname='foo' %}
{% include 'template.nunjucks' %}

template.nunjucks

<div class="{{divname}}"></div>

效果很好。我想将数据（例如 divname）从 index.html 文件移到 JSON 文件中，我们将其命名为 data.json：

{
"div_name": "foo"
}

使用gulp数据，我们可以读取这个data.json文件并在index.html的几乎任何地方使用{{div_name}}..几乎。似乎无法在 nunjucks 内容中使用 {{div_name}}，可能是由于嵌套 { ?

{% set divname='{{div_name}}' %}

拉入JSON数据失败，输出为

<div class="{{divname}}"></div>   instead of   <div class="foo"></div>

想要这种行为的一个非常简单的原因是，在 data.json 中，我可以定义多个 div 名称（divname1=foo、divname2=bar、divname3=ball），然后重用 template.nunjucks。当 template.nunjucks 或 index.html 中的标记变得非常复杂时，这是使用模板引擎功能的好方法。真正的用例是一个非常 long/semi-complicated 的 AWS CloudFormation 模板，其中资源名称在多个地方使用，并且在不同的 data.json 文件之上用于开发和生产环境。将值移动到 dev-data.json 和 prod-data.json，同时只为基础设施定义维护一个 "index" 文件，引入模板将使事情更易于维护

{% set divname={{divname1}} %}
{% include 'template.nunjucks' %}
{% set divname={{divname2}} %}
{% include 'template.nunjucks' %}

开发-data.json

divname1 = dev-foo
divname2 = dev-bar

产品-data.json

divname1 = foo
divname2 = bar

瞧，dev 和 prod 的不同数据需要维护一个 index.html 文件

Answer 1

以前从未使用过 nunjucks，但我想您可以删除 set 语句中 title_data 周围的括号：{% set title = title_data %}。

但是，如果您已经掌握了标题字符串，为什么还要费心重新分配。直接模板化即可：<title>{{ title_data }}</title>

JSON nunjucks 模板中的数据，使用 gulp-data

JSON data in nunjucks templating, using gulp-data

javascript

json

nunjucks

gulp-data

gulp-nunjucks-render