Несколько файлов Nunjucks с различными данными JSON, используя gulp

Я хотел бы использовать 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'));
});

layout.nunjucks

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

index.nunjucks

{% extends "layout.nunjucks" %}

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

data.json

{
    "title": "DEFAULT"
}

Каков наилучший способ изменить этот рабочий процесс для создания нескольких файлов, каждый из которых имеет свой заголовок?

Я обнаружил, что могу создать несколько index.nunjucks файлы, но похоже, что все они используют один и тот же data.json файл. Я также не хотел бы создавать отдельный файл JSON для каждого.

Могу ли я добавить массив в мой data.json файл, чтобы иметь Nunjucks цикл и создать отдельный файл для каждого найденного объекта? Такие как следующее:

data.json

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

Или есть способ установить переменные внутри index.nunjucks файл, не полагаясь на хранение их в формате JSON?

1 ответ

Решение

Нашел способ сделать это: в каждом файле индекса Nunjucks я установил переменную с именем email на имя файла и обновил мой data.json файл с новым объектом, совпадающим с именем файла с его собственным содержимым.

default.nunjucks

{% set email = default %}

{% include "index.nunjucks" %}

test.nunjucks

{% set email = test %}

{% include "index.nunjucks" %}

index.nunjucks

{% extends "layout.nunjucks" %}

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

layout.nunjucks

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

data.json

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

При компиляции через gulp создаются два отдельных электронных письма с собственным заголовком с использованием одного и того же шаблона.

Другие вопросы по тегам