4

Gulp を使用して、Markdown と Nunjucks を使用して静的ページを生成するためのワークフローの設定に取り組んでいます。このために私が依存している現在の 2 つのタスクは次のとおりです。

gulp.task('templates', function() {
    return gulp.src('app/templates/pages/*.nunjucks') 
        .pipe(nunjucksRender({
        path: ['app/templates/', 'app/templates/pages/']
        }))
        .pipe(gulp.dest('app'));
});

gulp.task('pages', function() {
    gulp.src('app/pages/**/*.md')
        .pipe(frontMatter())
        .pipe(marked())
        .pipe(wrap(function (data) {
            return fs.readFileSync('app/templates/pages/' + data.file.frontMatter.layout).toString()
        }, null, {engine: 'nunjucks'}))
        .pipe(gulp.dest('app'))
});

次の構造を使用します。

/app
|   index.html
|
+---css
|       app.scss
|       custom.scss
|
+---js
|       app.js
|
+---pages
|       index.md
|
\---templates
    |   layout.nunjucks
    |
    +---macros
    |       nav-macro.nunjucks
    |
    +---pages
    |       index.nunjucks
    |
    \---partials
            navigation.nunjucks

これを実行するとgulp templates、layout.nunjucks を拡張する index.nunjucks を使用して、index.html が /app にコンパイルされます。gulp pagesただし、 index.html のコンテンツを生成するために、index.md から frontmatter と Markdown を描画するために使用したいと考えています。

私が抱えている問題はパスです: 上記の構造を考えると、/app/templates/pages/index.nunjucks を介して /app/index.html のコンテンツとして /app/pages/index.md を使用するにはどうすればよいですか? 現在、タスクは で失敗しTemplate render error: (unknown path)ます。

基本的に、私はここで達成されたことを拡張しようとしています: Gulp Front Matter + Nunjucks による Markdown

4

1 に答える 1

7

あなたが投稿したのとまったく同じGulpfile.jsを使用する、セットアップの簡略化されたバージョンが実行されています。次のようになります。

project/Gulpfile.js 
project/index.html 
project/app/pages/index.md
project/app/templates/layout.nunjucks
project/app/templates/pages/index.nunjucks

インデックス.md

---
title: Example
layout: index.nunjucks
date: 2016-03-01
---
This is the text

レイアウト.ヌンジャックス

<h1>{{file.frontMatter.title}}</h1>

<div class="date">{% block date %}{% endblock %}</div>

<div>{% block text %}{% endblock %}</div>

index.nunjucks

{% extends "app/templates/layout.nunjucks" %}

{% block date %}
{{file.frontMatter.date}}
{% endblock %}

{% block text %}
{{contents}}
{% endblock %}

実行後のindex.htmlgulp pages：

<h1>Example</h1>

<div class="date">
Tue Mar 01 2016 01:00:00 GMT+0100 (CET)
</div>

<div>
<p>This is the text</p>

</div>

おそらく間違っていると思われるトリッキーな部分は{% extends %}、index.nunjucksまたはその他の場所でパスを指定する方法です。

gulp を実行すると、現在の作業ディレクトリ (CWD) が Gulpfile.js があるフォルダー (私の場合はproject/ ) に変更されます。デフォルトでは、nunjuck はFileSystemLoaderCWD を検索して他のテンプレートをロードする a を使用します。つまり、.nunjucksファイル内のすべてのパスは、CWD、つまりプロジェクトのベース フォルダーからの相対パスである必要があります。

理論的には、 index.nunjucksにFileSystemLoader関連するテンプレート パスを指定できるように、独自のものを提供できるはずですが、多くのテンプレート エンジン間の違いを抽象化するために内部的に使用されます。カスタムローダーを提供します。gulp-wrapconsolidate

于 2016-03-01T18:57:08.967 に答える