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.mjsimport { defineConfig } from 'astro/config';export default defineConfig({ experimental: { contentlayer: true, },});
登录后复制
基本加载器结构 (TypeScript)
创建一个新文件 (例如 src/loaders/jokes.ts)，构建基本加载器结构：
// src/loaders/jokes.tsimport 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.tsimport 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.tsimport { 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 应用提供了无限可能。
以上就是如何构建 Astro 集合加载器的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2642552.html
