11ty中添加front matter数据的正确方法及VS扩展相关疑问

你不需要安装额外的VS Code扩展就能让元数据正常生效，目前的问题是你生成的front matter格式不符合11ty的规范。

你现在的front matter分隔符---和字段内容写在了同一行，还多了不必要的空格，11ty无法正常识别这种格式。标准的YAML front matter要求上下分隔符单独占一行，字段冒号和值之间可以加空格，正确格式如下：

---
title: My page title
layout: 'base.njk'
---

出现保存后被重排的情况，大概率是你本地VS Code安装的格式化插件（比如Prettier）没有正确识别.njk文件的语法规则，把front matter当成普通文本做了格式化处理。你可以在VS Code设置里将.njk后缀的文件关联到Nunjucks或者HTML语法，如果使用了格式化插件，可以配置插件忽略.njk文件的格式化，或者添加对应Nunjucks的格式化支持规则即可。

如果想要更方便的编辑体验，可以自行安装Nunjucks语法高亮类的扩展，但这不是元数据生效的必要条件，只要格式正确，11ty运行时会正常读取解析front matter内容。

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