如何使用Nuxt Content将Markdown内容插入Nuxt静态页面？

背景信息 #

我正在使用NuxtJS Content搭建博客，内容主要来自Markdown文件。已掌握基于/content目录下的MD文件创建动态页面的方法，但不知道如何将其中一个文件的内容注入到静态页面中。项目目录结构如下：

content/
├── blog/
│   ├── post1.md
│   ├── post2.md
├── privacy/
│   ├── policy.md
│   └── something-else.md
pages/
├── blog/
│   ├── _slug.vue
├── privacy/
│   ├── _slug.vue
├── privacy.vue
├── index.vue

目前我能通过以下代码基于policy.md生成动态页面：

<template>
    <article>
      <nuxt-content :document="policy" />
    </article>
</template>

<script>
export default {
  async asyncData({ $content, params }) {
    const policy = await $content('privacy', params.slug).fetch()
    return { policy }
  }
}
</script>

但我不想通过MD生成动态页面，也不想在路由中使用slug，而是希望将policy.md的内容直接插入到privacy.vue中，却不知如何操作。

我的尝试 #

我用上述方法尝试实现时未能成功。console.log(policy)返回[object] [OBJECT]，console.log(policy.title)返回undefined，这能说明什么问题？（我正在提升自己的调试能力）

为什么该方法在_slug.vue中有效，但在page.vue中无效？我感觉自己缺少相关的上下文知识，不清楚正确的实现方式。

解决方案 #

问题根源 #

在privacy.vue这类静态页面中，不存在params.slug参数——静态页面的路由固定（/privacy），不像动态页面_slug.vue会从URL中捕获slug参数。直接使用$content('privacy', params.slug)会因路径错误无法获取到目标文件，返回的对象并非预期的文档内容。

正确实现代码 #

在privacy.vue中，直接指定要获取的Markdown文件名即可，无需依赖params.slug：

<template>
  <article>
    <nuxt-content :document="policy" />
  </article>
</template>

<script>
export default {
  async asyncData({ $content }) {
    // 明确指定获取privacy目录下的policy.md文件
    const policy = await $content('privacy', 'policy').fetch()
    // 调试时可以用JSON.stringify查看完整对象结构
    console.log(JSON.stringify(policy, null, 2))
    return { policy }
  }
}
</script>

调试结果解读 #

• console.log(policy)返回[object] [OBJECT]仅说明变量是一个对象，但无法确定其具体内容，改用console.log(JSON.stringify(policy, null, 2))可以展开对象结构，排查是否获取到了正确的文档数据。
• console.log(policy.title)返回undefined，说明当前policy对象中没有title属性，核心原因是未正确获取到policy.md的内容（多数是路径参数错误导致的获取失败）。

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