如何在Eleventy的Front Matter中引用数据？

问题原因 #

YAML格式的Front Matter在Eleventy处理流程中，会早于分页数据注入完成解析，因此直接在YAML Front Matter里写模板语法（比如{{ possum.name }}）不会被渲染，只会被当作纯文本输出。

修复方案 #

方案1：使用JavaScript格式的Front Matter #

将模板的Front Matter改为JS格式（以---js开头），可直接访问分页上下文的possum变量：

---js
{
  pagination: {
    data: "possums",
    size: 1,
    alias: "possum"
  },
  permalink: `possums/${this.possum.name | slugify}/`,
  title: this.possum.name
}
---

{{ possum.name }} is {{ possum.age }} years old

方案2：使用Eleventy的Computed Data #

利用Eleventy提供的computed字段，在模板数据就绪后动态计算标题值：

---
pagination:
  data: possums
  size: 1
  alias: possum
permalink: "possums/{{ possum.name | slugify }}/"
computed:
  title: "{{ possum.name }}"
---

{{ possum.name }} is {{ possum.age }} years old

额外修正：修复JSON数据文件语法错误 #

你的_data/possums.json存在语法问题（对象末尾多余逗号、属性未加双引号），修正后才能被Eleventy正确读取：

/* _data/possums.json */
[
    {
        "name": "Fluffy",
        "age": 2
    },
    {
        "name": "Snugglepants",
        "age": 5
    },
    {
        "name": "Lord Featherbottom",
        "age": 4
    },
    {
        "name": "Pennywise",
        "age": 9
    }
]

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