content

使用 content/ 目录为你的应用程序创建一个基于文件的 CMS。

Nuxt Content 读取项目中的 content/ 目录并解析 .md、.yml、.csv 和 .json 文件，从而为你的应用程序创建一个基于文件的 CMS。

  • 使用内置组件渲染你的内容。
  • 使用类似 MongoDB 的 API 查询你的内容。
  • 通过 MDC 语法在 Markdown 文件中使用你的 Vue 组件。
  • 自动生成导航。
在 Nuxt Content 文档中了解更多信息。

启用 Nuxt Content

通过一条命令在项目中安装 @nuxt/content 模块，并将其添加到你的 nuxt.config.ts 中

终端
npx nuxt module add content

创建内容

将你的 markdown 文件放置在 content/ 目录中

content/index.md
# Hello Content

该模块会自动加载并解析它们。

渲染内容

要渲染内容页面，请通过 <ContentRenderer> 组件添加一个 捕获所有路由

app/pages/[...slug].vue
<script lang="ts" setup>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').path(route.path).first()
})
</script>

<template>
  <div>
    <header><!-- ... --></header>

    <ContentRenderer
      v-if="page"
      :value="page"
    />

    <footer><!-- ... --></footer>
  </div>
</template>

文档

前往 https://content.nuxtjs.org.cn 了解有关 Content 模块功能的更多信息，例如如何构建查询以及如何在 Markdown 文件中通过 MDC 语法使用 Vue 组件。