标签导航：

如何构建 astro 集合加载器

Astro 1.14 版本推出了“内容层 API”这一强大功能，扩展了现有内容集合功能，允许您从 Astro 项目本地文件之外的来源获取数据。虽然 Astro 团队已提供许多加载器处理常见数据源（例如 RSS 提要、CSV 文件），但本文将指导您如何构建自定义加载器。

项目设置

首先，创建一个新的 Astro 项目：

npm create astro@latest

按照 CLI 指南完成项目设置。启动项目：

npm run dev

访问 http://localhost:4321 查看项目。

启用实验性功能

由于内容层 API 仍处于实验阶段，需要在 astro.config.mjs 文件中启用：

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
    experimental: {
        contentlayer: true,
    },
});

基本加载器结构 (TypeScript)

创建一个新文件 (例如 src/loaders/jokes.ts)，构建基本加载器结构：

// src/loaders/jokes.ts
import type { Loader } from 'astro/loaders';

export const jokesLoader: Loader = {
    name: 'jokes',
    load: async (context) => {},
};

加载器是一个对象，包含以下属性：

  • name (必填): 加载器的名称。
  • load (必填): 加载数据逻辑的异步函数，接收一个 context 对象，包含存储、日志等功能。
  • schema (可选): 用于数据验证的 Zod 架构。

获取数据 (爸爸笑话 API)

使用 fetch 从爸爸笑话 API 获取数据：

// src/loaders/jokes.ts
import type { Loader } from 'astro/loaders';

export const jokesLoader: Loader = {
    name: 'jokes',
    load: async (context) => {
        const response = await fetch('https://icanhazdadjoke.com/', {
            headers: {
                accept: 'application/json',
            },
        });

        const data = await response.json();
        context.store.set({ id: data.id, data }); // 将数据存储到 context.store
    },
};

连接加载器到集合

创建 src/content/config.ts 文件，定义一个名为 jokes 的集合，并使用自定义加载器：

// src/content/config.ts
import { defineCollection } from 'astro:content';
import { jokesLoader } from '../loaders/jokes';

const jokes = defineCollection({
    loader: jokesLoader,
});

export const collections = { jokes };

访问数据

在 Astro 文件中使用 getCollection 函数访问数据：

---
import { getCollection } from 'astro:content';

const jokes = await getCollection('jokes');
---

<ul>
  {jokes.map((joke) => <li>{joke.data.joke}</li>)}
</ul>

总结

本文演示了如何创建一个简单的 Astro 集合加载器。您可以根据需要扩展此方法，创建更复杂的数据加载逻辑，并将其打包为可重用的模块。 这为构建更强大的 Astro 应用提供了无限可能。