---
title: "content"
description: "使用 content/ 目录为您的应用程序创建基于文件的 CMS。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/directory-structure/content"
---
# content

> 使用 content/ 目录为您的应用程序创建基于文件的 CMS。

[Nuxt Content](https://content.nuxt.com) 读取项目中的 [`content/ 目录`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/content)，并解析 `.md`、`.yml`、`.csv` 和 `.json` 文件，为您的应用程序创建基于文件的 CMS。

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

::read-more{to="https://content.nuxt.com" target="_blank"}
在 **Nuxt Content** 文档中了解更多信息。
::

## 启用 Nuxt Content

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

```bash [Terminal]
npx nuxt module add content
```

## 创建内容

将您的 Markdown 文件放置在 `content/` 目录内：

```md [content/index.md]
# 你好，Content
```

该模块会自动加载并解析文件。

## 渲染内容

要渲染内容页面，请使用 [`<ContentRenderer>`](https://content.nuxt.com/docs/components/content-renderer) 组件添加一个[全匹配路由](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/pages/#catch-all-route)：

```vue [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>
```

## 文档

::tip{icon="i-lucide-book"}
访问 <https://content.nuxt.com> 了解更多关于 Content 模块的功能，比如如何构建查询及在 Markdown 文件中使用 MDC 语法来使用 Vue 组件。
::


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.