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');
---
-
{jokes.map((joke) =>
- {joke.data.joke} )}
总结
本文演示了如何创建一个简单的 Astro 集合加载器。您可以根据需要扩展此方法，创建更复杂的数据加载逻辑，并将其打包为可重用的模块。 这为构建更强大的 Astro 应用提供了无限可能。
