Nunjucks，在“包含”部分文件中定义的块被扩展忽略答案

【问题标题】：Nunjucks, blocks defined within "include" partial file ignored by extendNunjucks，在“包含”部分文件中定义的块被扩展忽略
【发布时间】：2016-02-19 23:42:13
【问题描述】：

这是我的用例

我有一个文件将各个部分组合在一起（holy-grail.njs），然后由我想要的实际页面（single.njs）扩展。问题是包含文件中定义的块被实际页面模板忽略。你可以看到扩展的侧边栏文本没有出现在截图中<p>Here is some additional content for the sidebar extended in</p>

只是为了笑，我将块代码从 sidebar.njs 移到了 Holy-grail.njs，是的，它由 single.njs 扩展，所以它确实如我所料。

这是一个错误？，一个非功能？解决方法怎么样？或者翡翠会做我想做的事吗？我假设“包含”文件只是在进一步处理之前被包含，但也许它们被处理然后包含？如果无法做到这一点，我组织模板片段/部分然后扩展/自定义内容的整个常规方式将是行不通的。

三年前有人问过同样的问题，但没有人回答 Blocks in included files not being filled by extended templates

single.njs

{% extends "layouts/holy-grail.njs" %}

{% block sidebar %}
<p>Here is some additional content for the sidebar extended in</p>
{% endblock %}

{% block article %}
  {% raw %}
  {{ Hugo code here to grab the article title and content }}
  {% endraw %}
{% endblock %}

圣杯.njs

{% set reg = "regions/" %}
{% set cmp = "components/" %}

{% include "regions/head.njs" %}
<body class='page'>
    {% include  reg + "header.njs" %}
     <div class="rollover-wrapper">
        {% include reg + "topbar.njs" %}
        <main>
        {% include reg + "sidebar.njs" %}
        <section id="content">
          {% block article %}
            {# This is where one melds in article content #}
          {% endblock %}
        </section>
          </main>
          {% include reg + "footer.njs" %}
       </div>
      {% include cmp + "javascripts.njs" %}
  </body>

sidebar.njs

<aside id="sidebar" class="sidebar">
<p> some sidebar content set in the sidebar.njs file </p>
{% block sidebar %}
  {# This is where one melds in more sidebar content #}
{% endblock %}
</aside>

【问题讨论】：

标签： include extends partials nunjucks

【解决方案1】：

来自 Nunjucks 的一位维护者

您的猜测是正确的：包括在“更高级别”上运行，而不是模板继承。所以一个包含的模板可以有块，并且可以有自己的“扩展”标签和完全独立的模板继承层次结构，但它的块不以任何方式与包含模板的继承层次结构的块。

所以我想出的解决方案是使用另一个工具（gulp 插件）预先组装部分，然后像这样通过 nunjucks 运行它们。

注意，我的预处理器文件使用扩展名 *.pnjs 并输出到相应的 *.njs 文件，然后在 single.njs 中处理/扩展该文件。

var merge = require('gulp-file-include')
var rename = require("gulp-rename");

gulp.task('html:pre', function() {

  gulp.src(['assets/html/nunjucks/layouts/*.pnjs'])
    .pipe(merge({
      prefix: '@@',
      basepath: 'assets/html/nunjucks'
    }))
    .pipe(rename({extname: ".njs"}))
    .pipe(gulp.dest('assets/html/nunjucks/layouts/'));
});

var nunjucks = require('gulp-nunjucks-render');

    gulp.task('html:njs',['html:pre'], function() {

    gulp.src('assets/html/nunjucks/*.njs')
        .pipe(nunjucks({ path: ['assets/html/nunjucks'] // String or Array
    }))
            .on('error', console.log)
        .pipe(gulp.dest('./builds/dev/'));
});

然后您必须将包含语法更改为 gulp-file-include 支持的语法

像这样。

@@include('regions/head.njs')
<body class='page'>
    @@include('regions/header.njs')
    <div class="rollover-wrapper">
        @@include('regions/topbar.njs')
        <main>
        @@include('regions/sidebar.njs')
        <section id="content">
          {% block article %}
            {# This is where one melds in article content #}
          {% endblock %}
        </section>
          </main>
          @@include('regions/footer.njs')
       </div>
      @@include('components/javascripts.njs')
  </body>

【讨论】：