content
使用 content/ 目录为你的应用程序创建一个基于文件的 CMS。
Nuxt Content 读取你项目中的 content/ 目录，并解析 .md、.yml、.csv 和 .json 文件，为你的应用程序创建一个基于文件的 CMS。
- 使用内置组件渲染你的内容。
- 使用类似 MongoDB 的 API 查询你的内容。
- 使用 MDC 语法在 Markdown 文件中使用你的 Vue 组件。
- 自动生成你的导航。
启用 Nuxt Content
在你的项目中安装 @nuxt/content 模块，并使用一个命令将其添加到你的 nuxt.config.ts 中
终端
npx nuxi module add content
创建内容
将你的 markdown 文件放在 content/ 目录中
content/index.md
# Hello Content
该模块会自动加载和解析它们。
渲染内容
要渲染内容页面，使用 <ContentRenderer> 组件添加一个 通配符路由
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 组件。