我正在尝试理解 Nunjucks 的语言模板。
为了生成 HTML，我使用 Gulp + 插件 gulp-nunjucks-render。
遇到一个问题:我不明白如何实现元标签标题和描述的生成。
项目文件结构:
project
|
| -> dist > index.html (compiled)
| page1.html (compiled)
| page2.html (compiled)
|
|
| -> src
|-> pages -> index.njk (home page)
| page1.njk (page 1)
| page2.njk (page 2)
|
|-> templates
| |-> layout.njk
| |
| |-> parts -> header.njk
| footer.njk
|
|-> styles -> style.css
| style.min.css
|
|-> data.json
布局.njk
<!-- layout.njk -->
<html lang="en">
<head>
<title>{{ title }}</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body class="page">
{% block header %}{% endblock %}
{% block main %}{% endblock %}
{% block footer %}{% endblock %}
</body>
</html>
我按如下方式连接到每个页面:
{% extends "layout.njk" %}
index.njk
{% extends "layout.njk" %}
{% block header %} {% include "parts/header.njk" %} {% endblock %}
{% block main %}
<main class="main">
<!-- content -->
</main>
{% endblock %}
{% block footer %} {% include "parts/footer.njk" %} {% endblock %}
page1.njk
{% extends "layout.njk" %}
{% block header %} {% include "parts/header.njk" %} {% endblock %}
{% block main %}
<main class="main">
<!-- content page1 -->
</main>
{% endblock %}
{% block footer %} {% include "parts/footer.njk" %} {% endblock %}
page2.njk
{% extends "layout.njk" %}
{% block header %} {% include "parts/header.njk" %} {% endblock %}
{% block main %}
<main class="main">
<!-- content page1 -->
</main>
{% endblock %}
{% block footer %} {% include "parts/footer.njk" %} {% endblock %}
我在 documentation 中找不到任何标题输出的示例，所以我看到的最有趣的方式是 here .
例如，从文件 .JSON 中获取标题和描述
data.json
"pages": [
{
title: "Hompage"
description: "This is the home page"
},
{
title: "Page1"
description: "This is page 1"
}
{
title: "Page2"
description: "This is page 2"
}
]
gulpfile.js
const gulp = require('gulp');
const nunjucksRender = require('gulp-nunjucks-render');
const data = require('gulp-data');
gulp.task('nunjucks', function() {
return gulp.src('src/pages/**/*.njk')
.pipe(data(function() {
return require('./src/data.json')
}))
.pipe(nunjucksRender({
path: ['src/templates']
}))
.pipe(gulp.dest('docs'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('watch', function(cb) {
gulp.parallel(
'nunjucks',
)(cb);
gulp.watch('src/**/*.njk', gulp.series('nunjucks'));
});
gulp.task('default', gulp.series('watch'));
我不知道如何从json中提取数据。请提供解决方案。
最佳答案
如果您希望传递 data.json 文件中的数据
第 1 步:您需要使用某种方式在数据文件本身中指定页面名称。
例如:data.json
{
"pages": {
"home": {
"title": "Hompage",
"description": "This is the home page"
},
"page1": {
"title": "Page1",
"description": "This is page 1"
},
"page2": {
"title": "Page2",
"description": "This is page 2"
}
}
}
第 2 步:您必须将页面名称设置为 nunjucks 页面中的变量。
例如:index.njk
{% set pageName = 'home' %}
{% extends "layout.njk" %}
{% block header %} {% include "parts/header.njk" %} {% endblock %}
{% block main %}
<main class="main">
<!-- content -->
</main>
{% endblock %}
{% block footer %} {% include "parts/footer.njk" %} {% endblock %}
第 3 步:在任何 nunjucks 页面、布局或部分中使用 pageName 变量来获取特定页面的特定数据。
例如:layout.njk
<html lang="en">
<head>
<title>{{ pages[pageName].title }}</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body class="page">
{% block header %}{% endblock %}
{% block main %}{% endblock %}
{% block footer %}{% endblock %}
</body>
</html>
我没有编译和测试这段代码。因此，如果您直接复制此代码，请确保所有变量和代码语法都正确。该逻辑必须基于 documentation 工作。
关于json - Nunjucks 模板引擎中的动态标题和描述，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54060810/