11ty站点布局链中base.njk前置元数据显示异常问题

原因分析 #

这是11ty对模板文件的处理规则导致的：

• 当一个模板文件被内容文件（比如你的page.html）直接通过layout字段指定为布局时（比如你的layer.njk），11ty会自动解析它的Front Matter，不会把这些内容输出到页面上。
• 但如果是被Nunjucks的{% extends %}指令继承的基础模板（比如你的base.njk），11ty不会把它当作“布局文件”来处理Front Matter——它只会把这个文件当作普通的Nunjucks模板内容来渲染，所以Front Matter的---分隔符和属性声明会被当成纯文本直接输出到浏览器里。

解决方法 #

你需要换一种方式定义全局常量，而不是在被继承的基础模板里写Front Matter，这里有两种常用方案：

方案1：在基础模板里用Nunjucks的{% set %}定义全局变量

直接修改base.njk，去掉Front Matter，改用Nunjucks的变量声明：

{% set test1 = "hello" %}
<!doctype html>
HTML GOES HERE

这样test1会作为全局变量被所有继承这个模板的子模板（包括layer.njk和page.html）访问到。

方案2：用11ty的全局数据文件定义

如果你的全局常量需要在整个站点的所有页面/模板中使用，更推荐这种方式：
在项目根目录创建_data文件夹，然后在里面新建globals.json文件，内容如下：

{
  "test1": "hello"
}

11ty会自动加载这个文件里的数据，所有页面和模板都可以直接通过{{ test1 }}访问这个变量，完全不需要在base.njk里做任何声明。

验证修改效果 #

修改后，你的page.html依然可以正常调用{{test1}}和{{test2}}，而且base.njk的Front Matter内容不会再出现在页面中，模板渲染完全正常。

内容的提问来源于stack exchange，提问作者Jcott