nuxt-content

Nuxt Content

工作流

1. 检查已安装的 @nuxt/content 版本、content.config.ts、content/ 下匹配的文件，以及使用这些文件的 Nuxt 部分。确保集合、源 glob、架构和使用方彼此一致，以此确认分支情况。
2. 打开下方最匹配的指南。仅对内容所属的 API 应用 Nuxt Content 指南；对于其余部分，请采用对应的 Nuxt、Nuxt Studio、Nuxt UI 或 Vue 指南。
3. 使用类型化集合和基于载荷的 Nuxt 数据加载来实现。集合类型能够解析、预期查询返回预期的文档结构，且渲染后的路由在目标渲染模式下正常工作，即表示更改已完成。

路由

任务	打开
集合类型、架构、索引、本地/远程源或区域前缀	集合
筛选、排序、分页、导航、周边内容或搜索	查询
Markdown、MDC、ContentRenderer、正文组件或代码高亮	渲染
数据库适配器、Markdown 处理、渲染器别名或部署存储	配置
钩子、转换器、自定义源、原始内容、调试或 Content v2 迁移	高级
可视化编辑、身份验证、媒体、草稿或 Git 发布	nuxt-studio 技能
编写或重组文档正文	document-writer 技能

基础

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

export default defineContentConfig({
  collections: {
    docs: defineCollection({
      type: 'page',
      source: 'docs/**',
      schema: z.object({
        updatedAt: z.date().optional(),
      }),
    }),
  },
})

<script setup lang="ts">
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('docs').path(route.path).first()
})
</script>

<template>
  <ContentRenderer v-if="page" :value="page" />
</template>

使用 npx nuxi typecheck 验证生成的集合类型。当查询结果为空时，请在更改查询逻辑前确认集合源包含该文件，尤其是 .navigation.yml。