Nunjucks模板引擎中的动态标题和描述
我试图理解恩朱克斯模板的语言。
要生成HTML，我使用Gulp +呈现。
面临的一个问题:我不知道如何实现元标签的生成、标题和描述。
项目文件结构：
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.jsonlayout.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 %}我在文档中找不到任何标题输出的例子，所以我看到这里最有趣的方法。
例如，从文件.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中提取数据。请提出解决办法。
回答 3
Stack Overflow用户
发布于 2019-05-02 12:48:40
由于在页面中使用extends layout.njk，所以可以在文档顶部设置title和description变量，如下所示：
{% set title = myTitle %}
{% set description = myDescriptionHere %}然后对每一页(index.njk、page1.njk、page2.njk等)都这样做。
或者，您可以在nunjucksRender中的gulpfile.js中定义变量如下：
.pipe(nunjucksRender({
path: ["yourPath"],
title: "yourTitle",
description: "yourDescriptionHere"
}))
// Rest of the code...我没有测试它，我只是从de文档和优秀文章：Nunjucks的杀手特征和使用Nunjucks构建包含组件的静态网站中推断出这一点。
Stack Overflow用户
发布于 2019-05-13 15:04:12
如果您希望从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>我没有编译和测试这段代码。因此，如果要直接复制此代码，请确保所有变量和代码语法都是正确的。逻辑必须基于文档工作
Stack Overflow用户
发布于 2019-01-08 09:22:22
使用extends时，应重新定义块以覆盖它。
var nunjucks = require('nunjucks');
var env = nunjucks.configure();
var html = `
{% extends "layout.njk" %}
{% block header %}
{{pages[1].title}}
{% endblock %}
{% block main %}
{{pages[1].description}}
{% endblock %}
`
var data = {
pages: [
{
title: "Hompage",
description: "This is the home page"
},
{
title: "Page1",
description: "This is page 1"
},
{
title: "Page2",
description: "This is page 2"
}]
}
res = nunjucks.renderString(html, data);
console.log(res);https://stackoverflow.com/questions/54060810
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号