Eleventy布局中Front Matter不生效 原内容直接输出到页面问题

问题原因 #

Eleventy 默认不会解析_includes目录下所有文件的 Front Matter 内容，你将布局共用的rightLinks数据写在/src/_includes/layouts/base.html的 Front Matter 块中，自然无法被识别解析，才会直接作为普通文本输出到页面顶部，也无法生成对应可用数据。

解决方法 #

有三种常用方案可选，按需选择即可：

方案1：将共享数据移入全局数据文件 #

这是最符合Eleventy设计规范的方案：

1. 在src目录下新建_data文件夹（如果没有的话）
2. 在_data内新建site.json（命名可自定义），写入如下内容：

{
  "rightLinks": [
    {
      "icon": "mail_outline",
      "href": "https://google.com"
    }
  ]
}

3. 删除base.html顶部的Front Matter块，在需要调用该数据的地方直接使用{{ site.rightLinks }}即可。

方案2：在布局内直接用模板语法定义变量 #

如果不想拆分数据到单独文件，可以直接用Nunjucks的变量定义语法替换原Front Matter：
删除base.html顶部的Front Matter块，在文件最开头添加如下代码：

{% set rightLinks = [
  {
    "icon": "mail_outline",
    "href": "https://google.com"
  }
] %}

该变量在当前模板、继承它的子模板、以及当前模板内引入的partial组件中都可以直接调用。

方案3：调整布局文件存放目录 #

如果一定要保留布局文件的Front Matter写法，将布局从_includes目录下移出即可：

1. 在src根目录下新建layouts文件夹，将原_includes/layouts下的所有布局文件移入
2. 修改Eleventy配置文件，添加布局目录配置：

module.exports = function(config) {
    config.addWatchTarget("./src/sass/");
    config.addPassthroughCopy('./src/images')

    return {
        dir: {
            input: "src",
            output: "dist",
            layoutDir: "layouts" // 新增这行指定布局目录
        },
        markdownTemplateEngine: 'njk',
        dataTemplateEngine: 'njk',
        htmlTemplateEngine: 'njk',
    }
  };

3. 修改所有页面中layout的引用路径，比如原来的layout: 'layouts/home'改成layout: 'home'即可。

修改完成后重启Eleventy服务即可生效。

内容的提问来源于stack exchange，提问作者Lucas David Ferrero