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によって拡張されているので、確かに私が疑ったとおりです。

バグですか、非機能ですか? 回避策はどうですか？それとも、ジェイドは私がしたいことをしますか? 「含まれる」ファイルは、さらに処理する前と同じように含まれていると思いましたが、処理されてから含まれているのでしょうか? これを行うことができなければ、テンプレートのピース/部分を整理し、コンテンツを拡張/カスタマイズする私の全体的なグルーヴィーな方法はうまくいきません.

これと同じ質問が 3 年前に行われましたが、誰も回答 しませんでした インクルード ファイル内のブロックが拡張テンプレートによって埋められていない

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>

ヌンジャックス

4

1 に答える 1

3

これは Nunjucks のメンテナーの 1 人からのものです。

あなたの推測は正しいです。インクルードは、テンプレートの継承よりも「高いレベル」で動作します。そのため、インクルードされたテンプレートはブロックを持つことができ、独自の「extends」タグと完全に別のテンプレート継承階層を持つことができますが、そのブロックはインクルード テンプレートの継承階層のブロックとはまったく相互作用しません。

したがって、私が思いついた解決策は、別のツール (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 に答える