1

我想使用 gulp 和 Nunjucks 一次生成多个具有不同内容的模板文件。这些模板都将具有完全相同的布局，但为文本/图像传递不同的变量。

我能够成功生成单个index.html文件，但不确定如何设置它以一次创建多个文件。这是我所拥有的简化版本：

gulpfile.js

var nunjucks = require('gulp-nunjucks-render');
var data     = require('gulp-data');

gulp.task('nunjucks', function () {
    return gulp
        .src('./src/layouts/**/*.+(html|nunjucks)')
        .pipe(data(function () { return require('./src/data.json'); }))
        .pipe(nunjucks({ path: ['./src/templates'] }))
        .pipe(gulp.dest('./dist'));
});

布局.nunjucks

<head>
    {% block title %} {% endblock %}
</head>

index.nunjucks

{% extends "layout.nunjucks" %}

{% block title %}
    <title>{{ title }}</title>
{% endblock %}

数据.json

{
    "title": "DEFAULT"
}

更改此工作流程以生成多个文件且每个文件具有不同标题的最佳方法是什么？

我发现我可以创建多个index.nunjucks文件，但看起来它们都使用同一个data.json文件。我也不想为每个单独的 JSON 文件。

我可以在我的data.json文件中添加一个数组以让 Nunjucks 循环并为找到的每个对象创建一个单独的文件吗？如下所示：

数据.json

{
    "files": [{
        "title": "DEFAULT",
    }, {
        "title": "DEFAULT #2"
    }]
}

或者有没有办法在index.nunjucks文件中设置变量而不依赖于将它们存储在 JSON 中？

4

1 回答 1

1

找到了执行此操作的方法：在每个 Nunjucks 索引文件中，我设置了一个名为文件名的变量，并使用与文件名与其自己的内容匹配的新对象email更新了我的文件。data.json

默认.nunjucks

{% set email = default %}

{% include "index.nunjucks" %}

测试.nunjucks

{% set email = test %}

{% include "index.nunjucks" %}

index.nunjucks

{% extends "layout.nunjucks" %}

{% block title %}
    <title>{{ email.title }}</title>
{% endblock %}

布局.nunjucks

<head>
    {% block title %} {% endblock %}
</head>

数据.json

{
    "default":
    {
        "title": "TITLE"
    },
    "test":
    {
        "title": "TEST TITLE"
    }
}

通过 gulp 编译时，会使用相同的模板创建两封具有自己标题的单独电子邮件。

于 2017-10-02T20:26:15.433 回答