Nuxt Content 中 YAML 数据的使用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00501/article/details/148578306

Nuxt Content 中 YAML 数据的使用指南

content The file-based CMS for your Nuxt application, powered by Markdown and Vue components. 项目地址: https://gitcode.com/gh_mirrors/con/content

前言

在 Nuxt Content 项目中，YAML 是一种非常实用的数据格式，特别适合存储结构化内容。本文将详细介绍如何在 Nuxt Content 中定义、创建和查询 YAML 数据，帮助开发者高效管理项目中的结构化数据。

YAML 数据集合的定义

要在 Nuxt Content 中使用 YAML 数据，首先需要在配置文件中定义数据集合。以下是一个典型的配置示例：

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

export default defineContentConfig({
  collections: {
    authors: defineCollection({
      type: 'data',
      source: 'authors/**.yml',
      schema: z.object({
        name: z.string(),
        avatar: z.string(),
        url: z.string()
      })
    })
  }
})

这段代码做了以下几件事：

定义了一个名为 "authors" 的数据集合
指定了数据来源为 authors 目录下的所有 YAML 文件
使用 Zod 定义了数据结构验证规则，确保每个作者都有 name、avatar 和 url 字段

创建 YAML 数据文件

定义好集合后，就可以在指定目录下创建 YAML 文件了。YAML 文件以其简洁的格式著称，非常适合存储结构化数据。

以下是两个作者数据的示例：

name: Ahad Birang
avatar: https://avatars.githubusercontent.com/u/2047945?v=4
url: https://github.com/farnabaz

name: Baptiste Leproux
avatar: https://avatars.githubusercontent.com/u/7290030?v=4
url: https://github.com/larbish

YAML 文件的特点：

使用缩进表示层级关系
键值对用冒号分隔
不需要引号包裹字符串（除非包含特殊字符）
文件扩展名通常为 .yml 或 .yaml

查询 YAML 数据

Nuxt Content 提供了强大的查询 API，可以方便地从 YAML 文件中检索数据。

查询单个作者

<script lang="ts" setup>
const { data: author } = await useAsyncData('larbish', () => {
  return queryCollection('authors')
    .where('stem', '=', 'larbish')
    .first()
})
</script>

这段代码：

使用 useAsyncData 进行异步数据获取
通过 queryCollection 指定要查询的集合
使用 where 条件筛选特定作者（通过文件名 stem 匹配）
使用 first() 获取第一条匹配记录

查询所有作者并排序

<script lang="ts" setup>
const { data: authors } = await useAsyncData('authors', () => {
  return queryCollection('authors')
    .order('name', 'DESC')
    .all()
})
</script>

这段代码：