Question

我正在通过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

Answer 1

我有一个运行的设置的简化版本，它使用你发布的完全相同的Gulpfile.js。它看起来像这样：

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

<强> index.md

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

<强> layout.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 %}

运行gulp pages后

index.html ：

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

您可能出错的棘手部分是如何在 index.nunjucks 或其他地方指定{% extends %}的路径。

当你运行gulp时，它将当前工作目录（CWD）更改为Gulpfile.js所在的文件夹（在我的例子中： project / ）。默认情况下，nunjuck使用FileSystemLoader搜索CWD以加载其他模板。这意味着 .nunjucks 文件中的所有路径都需要相对于CWD，即项目的基本文件夹。

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

有降价和nunjucks的gulp工作流程

1 个答案: