Nunjucks 模板引擎中的动态标题和描述答案

【问题标题】：Dynamic title and description in the Nunjucks template engineNunjucks 模板引擎中的动态标题和描述
【发布时间】：2019-01-06 10:55:21
【问题描述】：

我正在尝试理解 Nunjucks 模板的语言。

要生成 HTML，我使用 Gulp + 插件 gulp-nunjucks-render。

遇到一个问题：我无法理解如何实现生成meta标签的title和description。

项目文件结构：

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

layout.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 中提取数据。请提出解决方案。

【问题讨论】：

标签： json nunjucks gulp-nunjucks-render

【解决方案1】：

如果您希望从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

【讨论】：

【解决方案2】：

由于您在页面中使用extendslayout.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 文档和精彩文章中推断出来： Killer features of Nunjucks 和 Building a static website with components using Nunjucks.

【讨论】：

【解决方案3】：

当你使用extends时，你应该重新定义block来覆盖它

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);

【讨论】：

感谢您的建议，但我不完全明白。将您建议的代码插入 gulpfile.js 并出现语法错误。我稍微纠正了我的问题，指出了文件结构和更多细节。如果您能更详细地解释如何组织工作，我将不胜感激。
我不明白你到底想要什么：为什么page1.njk = page2.njk？ nunjucks 在哪里使用您的数据？我也不知道gulp，所以我不知道它是如何遍历页面的。
'page1'和'page2'有共同的页眉和页脚，只是主要内容不同。 Nunjucks 从外部 data.json 获取数据（return require('./src/data.json')）。如果你觉得很难回答，那也没关系。你已经给出了提示，我会想办法弄清楚的。