使用 nunjucks 包括 Metalsmith-in-place 导致渲染错误答案

【问题标题】：Using nunjucks includes with Metalsmith-in-place causing rendering error使用 nunjucks 包括 Metalsmith-in-place 导致渲染错误
【发布时间】：2018-04-12 14:42:48
【问题描述】：

我正在使用 Metalsmith 和 Nunjucks 创建一个静态网站。

我在创建一个类似博客的网站时没有问题，这意味着我可以使用 metalsmith-layout 插件创建一个可以包装一些降价内容的布局。

但我想创建一些视图：

使用布局（使用 front-matter 或 extends 方法）
使用一些手工制作的组件/局部/宏

例如，一个 index.njk ：

{% extends "layouts/base.njk" %}

{% block content %}

Hello World!

{% include components/test1.njk %}

{% include components/test2.njk %}

{% include components/test3.njk %}

{% endblock %}

我尝试使用 metalmisth-in-place 插件：

.use(inplace({
    engineOptions: {
        path: __dirname + '/src/templating'
    }
})

但我有一个错误：The Transform "nunjucks" does not support rendering synchronously

似乎 inplace() 无法正确呈现包含...

有什么想法吗？

【问题讨论】：

标签： nunjucks metalsmith

【解决方案1】：

好的，我对金属匠的松弛有一些很好的答案和解释。

首先，文件夹结构应该是这样的：

layouts/
    base.njk
components/
    test.njk
partials/
    head.njk
src/
    index.njk

原因是src文件夹应该只收集主要内容，所有的nunjucks文件都只是添加到这个内容中。

那么，有了这个配置，一个简单的.use(inplace())就足够了。如果目录与./layouts 不同，则可以添加directory 选项。

有了这个设置，这个 index.njk 就可以正常工作了：

{% extends "./layouts/base.njk" %}

{% block content %}

Hello World!
{% include './components/test.njk' %}

{% endblock %}

base.njk 布局为：

<!doctype html>
<html class="" lang="">

  {% include '../partials/head.njk' %}

  <body>

    {% block content %}{% endblock %}

  </body>

</html>

但是要小心，正如我被告知的那样：

src 文件夹中的文件在 metalsmith 中转换 files 对象，因此从那里读取，这意味着在内存中和不直接从磁盘。这意味着 nunjucks 无法解决此文件夹内的相对路径，这就是为什么包含在 index.njk 有一个绝对路径：'./components/test.njk'
src 文件夹外的文件不会在 metalsmith 文件对象，因此直接从磁盘读取。在这种情况下，nunjucks 可以解析相对路径，这就是为什么包含有这样的路径'../partials/head.njk'

希望我解释清楚并理解它^^

非常感谢“ismay”花一些时间来帮助我解决 Metalsmith 的闲暇时间。

【讨论】：