2

我正在尝试了解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

布局.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" %}

索引.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 中获取标题和描述

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

4

3 回答 3

1

由于您extends layout.njk在您的页面中，您可以像这样在文档顶部设置title和变量：description

{% set title = myTitle %}
{% set description = myDescriptionHere %}

然后你对每一页（index.njk, page1.njk,page2.njk等）都这样做

或者，您可以nunjucksRender在gulpfile.jsas 中定义变量：

.pipe(nunjucksRender({
    path: ["yourPath"],
    title: "yourTitle",
    description: "yourDescriptionHere"
}))
// Rest of the code...

我没有对其进行测试，我只是从 de 文档和精彩文章中推断出来： Nunjucks 的杀手级功能 和 使用 Nunjucks 构建带有组件的静态网站。

于 2019-05-02T12:48:40.807 回答
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 步：pageName在任何 nunjucks 页面、布局或部分中使用变量来获取特定页面的特定数据。

例如：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>

我没有编译和测试这段代码。因此，如果您直接复制此代码，请确保所有变量和代码语法都是正确的。逻辑必须基于文档工作

于 2019-05-13T15:04:12.123 回答
0

使用时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);
于 2019-01-08T09:22:22.180 回答