如何建立 Astro 集合載入器

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中文網其他相關文章！