content

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

Nuxt Content 读取项目中的 content/ 目录,并解析 .md.yml.csv.json 文件,以创建一个基于文件的内容管理系统。

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

启用 Nuxt Content

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

终端
npx nuxi module add content

创建内容

将你的 Markdown 文件放入 content/ 目录中:

content/index.md
#你好,内容

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

渲染内容

为了渲染内容页面,添加一个 通配符路由,并使用 <ContentDoc> 组件:

pages/[...slug].vue
<template>
  <main>
    <!-- ContentDoc 默认返回与 `$route.path` 对应的内容,或者你可以传递一个 `path` 属性 -->
    <ContentDoc />
  </main>
</template>

文档

前往 https://content.nuxt.com 了解更多关于内容模块的功能,比如如何构建查询以及如何在 Markdown 文件中使用 MDC 语法嵌入 Vue 组件。