Question

我想使用Nunjucks模板但想要传递我自己的JSON数据以用于模板。

这里的文档很稀疏。

https://mozilla.github.io/nunjucks/templating.html

谢谢。

Answer 1

您可以使用gulp-data 它允许您将json文件传递给您用来渲染Nunjucks的任务运行器。

gulp.task('nunjucks', function() {
  return gulp.src('app/pages/**/*.+(html|nunjucks)')
    // Adding data to Nunjucks
    .pipe(data(function() {
      return require('./app/data.json')
    }))
    .pipe(nunjucksRender({
      path: ['app/templates']
    }))
    .pipe(gulp.dest('app'))
});

Answer 2

在2019年在这里发现了这颗宝石，但认为这对像我这样搜索但没有找到任何东西的人会有帮助。

首先，在宏中创建带有预期参数的模板部分

{% macro render(secTitle, secSubtitle) %}
    <h4 class="heading">
        {{ secTitle | safe }}, {{ secSubtitle | safe }}
    </h4>
{% endmacro %}

将其另存为[yourname].tpl-在这种情况下为heading.tpl

然后，导入该块并使用上面的宏中指定的功能（在这种情况下为render()）

{% block heading %}
    {% import "components/heading.tpl" as heading with context %}
    {{ heading.render(
        secTitle='Hello there',
        secSubtitle='General Kenobi'
    ) }}
{% endblock %}

这将导致：

<h4 class="heading">
    Hello there, General Kenobi
</h4>

请注意组件中字符串后的| safe-这意味着它将以HTML格式输出字符串（例如<br>将创建新行，而不是在文本中输出<br> ）。

Answer 3

只需结合使用dump和safe过滤器：

<script>
  const choices = {{ yourJsonVar | dump | safe }};
</script>

Answer 4

您可以使用他们的异步渲染来实现这一目标。

https://mozilla.github.io/nunjucks/api.html#render

$.getJSON('/path/to/file.json', function (result) {
        nunjucks.render('path/to/template/file.html', { result : result }, function (err, res) {
            // do something
        });
    });

如何将JSON数据传递到Nunjucks模板？

4 个答案: