集合
定义内容集合
了解如何在 Nuxt 应用中定义和配置内容集合。
Nuxt Content 模块会自动解析位于 Nuxt 应用根目录下 content/
文件夹中的所有内容文件。此设置允许你自由地组织文件夹结构,以满足项目需求。
为了更好地组织内容,你可以使用内容集合 (Content Collections),它们帮助你更有效地分类和管理内容。这些集合在 content.config.ts
文件中定义。
如果没有
content.config.ts
文件,内容文件夹中的所有文件都会被默认解析和导入。但一旦添加了配置文件,只有符合集合中指定路径模式的文件才会被导入。什么是内容集合?
内容集合是 Nuxt Content 项目中组织相关内容的方式。它们提供了一种结构化方法来管理内容,使查询、展示和维护网站数据更加便捷。
关键特性包括:
- 逻辑分组:将相似内容归为一类,如博客文章、产品页面或文档
- 共享配置:对集合内所有条目应用通用设置和验证
- 优化查询:高效获取和筛选相关内容项
- 自动类型推断:在开发环境中获得类型安全和自动补全
- 灵活结构:按内容类型、类别或任何适合你的逻辑分组组织集合
定义集合
在项目根目录创建一个 content.config.ts
文件。这个特殊文件用于配置你的集合数据库、工具类型和内容处理。
以下是一个基础示例:
content.config.ts
import { defineCollection, defineContentConfig } from '@nuxt/content'
export default defineContentConfig({
collections: {
docs: defineCollection({
// 加载 `content` 目录下的所有文件
source: '**',
// 指定此集合内容类型
type: 'page'
})
}
})
目前,一个文档设计为仅归属一个集合。如果同一文件被多个集合引用,实时重新加载功能将无法正常工作。为避免此问题,建议使用
exclude
属性,通过合适的正则表达式显式排除文档在其他集合中出现。该话题仍在此 issue 中讨论中:nuxt/content#2966。集合模式 (Schema)
模式用于强制集合内数据的一致性,并作为 TypeScript 类型的唯一来源。
除内置字段外,你还可以通过为集合添加 schema
属性,利用 zod
模式定义自定义模式:
content.config.ts
import { defineCollection, defineContentConfig, z } from '@nuxt/content'
export default defineContentConfig({
collections: {
blog: defineCollection({
source: 'blog/*.md',
type: 'page',
// 为 docs 集合定义自定义模式
schema: z.object({
tags: z.array(z.string()),
image: z.string(),
date: z.date()
})
})
}
})
你可以定义任意数量的集合,以组织不同类型的内容。
查询集合
使用 queryCollection
工具从集合中获取一个或所有内容项:
pages/blog.vue
<script setup lang="ts">
const { data: posts } = await useAsyncData('blog', () => queryCollection('blog').all())
</script>
<template>
<div>
<h1>博客</h1>
<ul>
<li v-for="post in posts" :key="post.id">
<NuxtLink :to="post.path">{{ post.title }}</NuxtLink>
</li>
</ul>
</div>
</template>
defineCollection()
defineCollection
函数用于在内容配置中定义一个集合。它的 TypeScript 签名如下:
function defineCollection(collection: Collection): DefinedCollection
type Collection = {
// 决定内容如何处理
type: 'page' | 'data'
// 指定内容位置
source?: string | CollectionSource
// 用于内容验证和类型定义的 Zod 模式
schema?: ZodObject<T>
}
type CollectionSource = {
// 用于匹配内容的 glob 模式
include: string
// 路径前缀(仅适用于 'page' 类型)
prefix?: string
// 排除内容的 glob 模式数组
exclude?: string[]
// 匹配内容的根目录
cwd?: string
// 远程 git 仓库地址(例如:https://github.com/nuxt/content)
repository?: string
// 私有仓库的认证令牌(例如 GitHub 个人访问令牌)
authToken?: string
}
该函数返回已定义的集合对象。