NextJs中用Gray-Matter解析Markdown遇YAML重复映射键异常求助

问题场景 #

在Next.js项目中使用Gray-Matter解析Markdown文件生成博客文章，单个来源条目能正常渲染，添加多个来源后抛出YAML解析异常：

YAMLException: duplicated mapping key at line 16, column 8:
          },

原Markdown文件的YAML元数据部分：

title: 'Blog Title'
date: '2022-08-29'
snippet: 'TBD'
image: '/help.jpg'
sources: {
  "urls": [
    {
      "site": {
        "name": "Site Name 1",
        "url": "https://www.google.com"
      },
      "site": {
        "name": "Site Name 2",
        "url": "https://www.google.com"
      },
    }
  ]
}

错误原因 #

这是纯YAML语法错误，YAML规范不允许在同一个映射（对象）中出现重复的键。你在urls数组的同一个对象里重复定义了两次site键，导致Gray-Matter依赖的YAML解析器直接报错。

修复方案 #

调整YAML结构，将每个site对象作为urls数组的独立元素，而非塞进同一个对象中：

title: 'Blog Title'
date: '2022-08-29'
snippet: 'TBD'
image: '/help.jpg'
sources:
  urls:
    - site:
        name: "Site Name 1"
        url: "https://www.google.com"
    - site:
        name: "Site Name 2"
        url: "https://www.google.com"

（注：YAML缩进式写法比大括号写法更易读且不易出错，推荐使用）

前端代码适配 #

你的映射代码无需修改，调整后的数据结构和原遍历逻辑完全匹配，直接保留即可：

postData.sources.urls.map(item => 
  <ul>
   <li><a target="_blank" href={item.site.url}>{item.site.name}</a></li>
  </ul>
) 

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