Несколько файлов 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 создаются два отдельных электронных письма с собственным заголовком с использованием одного и того же шаблона.