如何让Nuxt Content通过Frontmatter中的slug渲染页面？

默认Nuxt Content是根据Markdown文件名生成路由的，你要想用Frontmatter里定义的slug字段作为路由路径，得修改/blog/[...slug].vue的查询逻辑，具体操作如下：

修改/blog/[...slug].vue文件 #

替换原有代码为：

<script setup>
const route = useRoute()
// 获取当前路由中的slug参数
const targetSlug = route.params.slug[0]

// 根据Frontmatter里的slug字段查询对应文章
const { data: doc } = await useAsyncData(`blog-${targetSlug}`, () => {
  return queryContent('blog')
    .where({ draft: false, slug: targetSlug })
    .findOne()
})

// 未找到文章时触发404
if (!doc.value) {
  throw createError({ statusCode: 404, statusMessage: 'Document not found' })
}
</script>

<template>
  <main class="prose mx-auto">
    <article v-if="doc">
      <h1>{{ doc.title }}</h1>
      <ContentRenderer :value="doc" class="text-[17px]" />
    </article>
  </main>
</template>

原因说明 #

原来的<ContentDoc>组件是根据文件路径（文件名）匹配内容的，当路由里的slug和文件名不一致时，它就找不到对应的Markdown文件。手动用queryContent查询时，我们指定匹配Frontmatter里的slug字段，就能正确关联到目标文章。

其他部分无需修改 #

你的blog/index.vue代码是正确的，它已经用article.slug生成了指向自定义路由的链接，保持原样即可。

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