content
使用 content/ 目录为您的应用程序创建基于文件的 CMS。
Nuxt Content 读取项目中的 content/
目录,并解析 .md
、.yml
、.csv
和 .json
文件,为您的应用程序创建基于文件的 CMS。
- 使用内置组件渲染您的内容。
- 使用类似 MongoDB 的 API 查询您的内容。
- 在 Markdown 文件中使用 MDC 语法引用您的 Vue 组件。
- 自动生成导航。
启用 Nuxt Content
在项目中安装 @nuxt/content
模块,并通过一条命令将其添加到 nuxt.config.ts
中:
Terminal
npx nuxt module add content
创建内容
将您的 Markdown 文件放置在 content/
目录内:
content/index.md
# 你好,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.nuxt.com 了解更多关于 Content 模块的功能,比如如何构建查询及在 Markdown 文件中使用 MDC 语法来使用 Vue 组件。