4

我正在通过 Gulp 设置使用 Markdown 和 Nunjucks 生成静态页面的工作流程。我目前依赖的两个任务是：

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.md 中绘制 frontmatter 和 Markdown 来生成 index.html 的内容。

我遇到的问题是路径：鉴于上述结构，如何通过 /app/templates/pages/index.nunjucks 使用 /app/pages/index.md 作为 /app/index.html 的内容？目前，任务失败并显示Template render error: (unknown path).

本质上，我试图扩展这里所取得的成就：Gulp Front Matter +Markdown through Nunjucks

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

布局.nunjucks

<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 使用FileSystemLoader搜索 CWD 来加载其他模板。这意味着.nunjucks文件中的所有路径都需要与 CWD 相关，即项目的基本文件夹。

从理论上讲，应该可以提供您自己的FileSystemLoader，以便您可以指定相对于index.nunjucks的模板路径，但在内部gulp-wrap使用consolidate以抽象出许多模板引擎之间的差异，我没有费心去弄清楚如何以及是否允许您提供自定义加载器。

于 2016-03-01T18:57:08.967 回答