javascript - nunjucks 模板中的 JSON 数据，使用 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，我们可以读取这个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 中我可以定义多个 divname(divname1=foo、divname2=bar、divname3=ball)，然后重用 template.nunjucks。当 template.nunjucks 或 index.html 中的标记变得非常复杂时，这是使用模板引擎功能的好方法。真正的用例是一个非常长/半复杂的 AWS CloudFormation 模板，其中资源名称在多个位置使用，并且最重要的是，不同的 data.json 文件用于开发和生产环境。将值移至 dev-data.json 和 prod-data.json，同时只为基础设施定义维护一个“索引”文件，该文件引入模板将使事情变得更易于维护

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

dev-data.json

divname1 = dev-foo
divname2 = dev-bar

prod-data.json

divname1 = foo
divname2 = bar

瞧，开发和生产的不同数据需要用一个 index.html 文件来维护

Answer 1

以前从未使用过 nunjucks，但我想你可以删除 title_data 周围的括号在 set声明:{% set title = title_data %} 。

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