2

这是我的用例

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

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

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

三年前问过同样的问题，没有人回答 包含文件中的块没有被扩展模板填充

单.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>

侧边栏.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>

修女

4

1 回答 1

3

这是来自 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>
于 2016-02-19T15:42:13.843 回答