content

Nuxt 内容 读取项目中的 content/ 目录 并解析 .md、.yml、.csv 和 .json 文件，为你的应用创建基于文件的 CMS。

¥Nuxt Content reads the content/ directory in your project and parses .md, .yml, .csv and .json files to create a file-based CMS for your application.

• 使用内置组件渲染你的内容。
• 使用类似 MongoDB 的 API 查询你的内容。
• 使用 MDC 语法在 Markdown 文件中使用你的 Vue 组件。
• 自动生成导航。

:

在 Nuxt Content 文档中了解更多信息。

¥Learn more in Nuxt Content documentation.

::

启用 Nuxt 内容

¥Enable Nuxt Content

在你的项目中安装 @nuxt/content 模块，并使用一个命令将其添加到你的 nuxt.config.ts 中：

¥Install the @nuxt/content module in your project as well as adding it to your nuxt.config.ts with one command:

npx nuxi module add content

创建内容

¥Create Content

将 Markdown 文件放在 content/ 目录中：

¥Place your markdown files inside the content/ directory:

# Hello Content

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

¥The module automatically loads and parses them.

渲染内容

¥Render Content

要渲染内容页面，请使用 <ContentRenderer> 组件添加 catch-all 路由：

¥To render content pages, add a catch-all route using the <ContentRenderer> component:

<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>

文档

¥Documentation