Content - 内容目录 #

Nuxt Content 模块读取项目中的content目录，并解析.md、.yml、.csv和.json文件，为应用程序创建一个基于文件的 CMS。

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

安装 #

安装@nuxt/content模块到你的应用程序中：

# yarn 
yarn add --dev @nuxt/content

# npm
npm install --save-dev @nuxt/content

# pnpm
pnpm add -D @nuxt/content

然后在nuxt.config.ts的modules中添加@nuxt/content：

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: [
    '@nuxt/content'
  ],
  content: {
    // https://content.nuxtjs.org/api/configuration
  }
})

创建内容 #

把你的 Markdown 文件放在你项目根目录下的content目录内：

content/index.md：

# Hello Content

@nuxt/content模块会自动加载并解析它们。

页面渲染 #

为了渲染内容页，使用ContentDoc组件添加一个catch-all route通用路由：

~/pages/[...slug].vue

<template>
  <main>
    <ContentDoc />
  </main>
</template>