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 中国語 Web サイトの他の関連記事を参照してください。