Astro 的 1.14 版本引入了内容层 API，将内容集合扩展到本地文件之外。 虽然 Astro 为常见数据源（RSS、CSV 等）提供了加载器，但创建自定义加载器非常简单。 本指南演示了如何为爸爸笑话 API 构建加载程序。
项目设置
首先创建一个新的 Astro 项目：
<code class="language-bash">npm create astro@latest</code>
按照 CLI 提示操作。 然后启动开发服务器：
<code class="language-bash">npm run dev</code>
通过http://localhost:4321访问您的项目。
启用实验 API
内容层 API 是实验性的。 通过修改 astro.config.mjs:
<code class="language-javascript">// astro.config.mjs
import { defineConfig } from 'astro/config';
export default defineConfig({
experimental: {
contentLayer: true,
},
});</code>创建加载器
创建一个新文件（例如，src/loaders/jokes.ts）来容纳您的加载程序。 此示例使用 TypeScript，但这不是强制性的。
<code class="language-typescript">// 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 json = await response.json();
context.store.set({
id: json.id,
data: json,
});
},
};</code>装载机包括：
name（必需）：加载程序的标识符。load（必需）：获取和处理数据的异步函数。 它接收一个 context 对象，提供对数据存储和记录器的访问。schema（可选）：用于数据验证的 Zod 模式。将加载器连接到集合
创建一个配置文件（例如，src/content/config.ts）来定义您的集合：
<code class="language-typescript">// src/content/config.ts
import { defineCollection } from 'astro:content';
import { jokesLoader } from '../loaders/jokes';
const jokes = defineCollection({
loader: jokesLoader,
});
export const collections = {
jokes,
};</code>访问数据
在 Astro 组件中，使用 getCollection:
<code class="language-astro">---
import { getCollection } from 'astro:content';
const jokes = await getCollection('jokes');
---
<ul>
{jokes.map(joke => <li>{joke.data.joke}</li>)}
</ul></code>构建和运行
运行npm run build。 加载器将执行、获取并存储笑话数据。 然后 Astro 组件将显示获取的笑话。
结论
这说明了构建一个基本的 Astro 集合加载器。 这种方法可以扩展到处理更复杂的数据源并合并错误处理和分页等功能。 模块化设计允许创建可重复使用的加载器，并有可能将它们打包以供更广泛的使用。
以上是如何构建 Astro 集合加载器的详细内容。更多信息请关注PHP中文网其他相关文章！
