选择你喜欢的包管理器来安装 Nuxt Content v3:
pnpm add @nuxt/content
yarn add @nuxt/content
npm install @nuxt/content
bun add @nuxt/content
在你的 nuxt.config.ts 文件中添加 Nuxt Content 模块:
export default defineNuxtConfig({
modules: ['@nuxt/content']
})
使用 create-nuxt CLI 创建新 Nuxt 项目时,可以直接从交互式模块选择器中选择 @nuxt/content。这将自动为你安装并注册该模块。
npm create nuxt <project-name>
yarn create nuxt <project-name>
pnpm create nuxt <project-name>
bun create nuxt <project-name>
deno -A npm:create-nuxt@latest <project-name>
better-sqlite3 或 sqlite3 包。experimental.nativeSqlite 配置。better-sqlite3 和 sqlite3 依赖安装后运行的构建步骤来生成本地绑定文件,Could not locate the bindings filepnpm approve-builds
package.json 中添加如下配置,显式允许本地构建:{
"pnpm": {
"onlyBuiltDependencies": [
"better-sqlite3",
"sqlite3"
]
}
}
在项目根目录创建一个 content.config.ts 文件:
import { defineContentConfig, defineCollection } from '@nuxt/content'
export default defineContentConfig({
collections: {
content: defineCollection({
type: 'page',
source: '**/*.md'
})
}
})
该配置创建了一个默认的 content 集合,用于处理项目 content 文件夹内的所有 Markdown 文件。你可以根据需要自定义集合配置。
type: page 表示内容文件和网站页面之间是一对一的关系。在项目根目录创建 content/index.md 文件:
# 我的第一个页面
这里是一段内容。
查看更多关于编写 Markdown 页面 的信息。
创建 pages/index.vue 文件并展示页面内容:
<script setup lang="ts">
const { data: home } = await useAsyncData(() => queryCollection('content').path('/').first())
useSeoMeta({
title: home.value?.title,
description: home.value?.description
})
</script>
<template>
<ContentRenderer v-if="home" :value="home" />
<div v-else>首页未找到</div>
</template>
pages 目录,你还需要更新 app.vue 文件,通过添加 NuxtPage 组件来允许渲染页面。(如果你的项目已有页面,则无需此操作。)<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>