Lzh on GitHub

定义内容集合

了解如何在你的 Nuxt 应用程序中定义和配置内容集合。

Nuxt Content 模块会自动解析位于你的 Nuxt 应用程序根目录下的 content/ 目录中的任何内容文件。此设置允许你自由地组织文件夹结构以适应你的项目需求。

为了更好地组织，请考虑使用内容集合，它可以让你更有效地分类和管理内容。这些集合在 content.config.ts 文件中定义。

如果不存在 content.config.ts 文件，默认情况下将解析并导入 content 文件夹中的所有文件。但是，一旦添加了配置文件，将只导入与集合中定义的指定路径模式匹配的文件。

什么是内容集合？

内容集合用于组织你的 Nuxt Content 项目中的相关条目。它们提供了一种结构化的方式来管理你的内容，使查询、显示和维护你网站的数据更加容易。

主要功能包括：

  • 逻辑分组：将相似的内容分组在一起，例如博客文章、产品页面或文档文章
  • 共享配置：跨集合中的所有条目应用通用设置和验证
  • 改进的查询：高效地获取和过滤相关内容条目
  • 自动类型推断：在你的开发环境中获得类型安全和自动完成
  • 灵活的结构：按内容类型、类别或任何其他适合你需求的逻辑分组来组织集合

定义集合

在你的项目根目录下创建一个 content.config.ts 文件。这个特殊的文件用于配置你的集合数据库、实用程序类型和内容处理。

这是一个基本示例：

content.config.ts
import { defineCollection, defineContentConfig } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    docs: defineCollection({
      // Load every file inside the `content` directory
      source: '**',
      // Specify the type of content in this collection
      type: 'page'
    })
  }
})
目前，一个文档一次只能存在于一个集合中。如果一个文件在多个集合中被引用，实时重新加载将无法正常工作。为避免这种情况，建议使用 exclude 属性，使用适当的正则表达式模式显式地从其他集合中排除该文档。此主题仍在以下 issue 中讨论：nuxt/content#2966。

集合模式

数据模式（Schemas） 在集合内强制实施数据一致性，并作为 TypeScript 类型声明的唯一真实来源。

在内置字段的基础上，您可以通过为集合添加 schema 属性并配合使用 zod 模式（schema）来定义数据结构。

content.config.ts
import { defineCollection, defineContentConfig, z } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    blog: defineCollection({
      source: 'blog/*.md',
      type: 'page',
      // Define custom schema for docs collection
      schema: z.object({
        tags: z.array(z.string()),
        image: z.string(),
        date: z.date()
      })
    })
  }
})
@nuxt/content 公开了一个包含一组常用数据类型的 Zod 模式的 z 对象。有关 Zod 的工作方式和可用功能的完整文档，请查看 Zod 的 README。
你可以定义任意数量的集合来组织不同类型的内容。

查询集合

使用 queryCollection 实用工具来获取集合中的一个或所有条目：

pages/blog.vue
<script setup lang="ts">
const { data: posts } = await useAsyncData('blog', () => queryCollection('blog').all())
</script>

<template>
  <div>
    <h1>Blog</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <NuxtLink :to="post.path">{{ post.title }}</NuxtLink>
      </li>
    </ul>
  </div>
</template>
在我们的 queryCollections API 文档中了解更多关于可用查询选项的信息。

defineCollection()

defineCollection 函数用于在你的内容配置中定义一个集合。以下是它的 TypeScript 签名：

function defineCollection(collection: Collection): DefinedCollection

type Collection = {
  // Determines how content is processed
  type: 'page' | 'data'
  // Specifies content location
  source?: string | CollectionSource
  // Zod schema for content validation and typing
  schema?: ZodObject<T>
}
了解更多关于集合类型的信息。
type CollectionSource = {
  // Glob pattern for content matching
  include: string
  // .path prefix (only applies to 'page' type)
  prefix?: string
  // Glob patterns to exclude content
  exclude?: string[]
  // Root directory for content matching
  cwd?: string
  // Remote git repository URL (e.g., https://github.com/nuxt/content)
  repository?: string
  // Authentication token for private repositories (e.g., GitHub personal access token)
  authToken?: string
}
了解更多关于集合来源的信息。

该函数返回已定义的集合对象。