Comment créer un chargeur de collection Astro

La version 1.14 d'Astro a introduit l'API Content Layer, étendant les collections de contenu au-delà des fichiers locaux. Bien qu'Astro fournisse des chargeurs pour les sources de données courantes (RSS, CSV, etc.), la création de chargeurs personnalisés est simple. Ce guide montre la création d'un chargeur pour une API de blague de papa.

Configuration du projet

Commencez par créer un nouveau projet Astro :

<code class="language-bash">npm create astro@latest</code>

Suivez les invites CLI. Démarrez ensuite le serveur de développement :

<code class="language-bash">npm run dev</code>

Accédez à votre projet sur http://localhost:4321.

Activation de l'API expérimentale

L'API Content Layer est expérimentale. Activez-le en modifiant astro.config.mjs:

<code class="language-javascript">// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
    experimental: {
        contentLayer: true,
    },
});</code>

Création du chargeur

Créez un nouveau fichier (par exemple, src/loaders/jokes.ts) pour héberger votre chargeur. Cet exemple utilise TypeScript, même si ce n'est pas obligatoire.

<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>

Un chargeur comprend :

• name (obligatoire) : L'identifiant du chargeur.
• load (obligatoire) : La fonction asynchrone récupérant et traitant les données. Il reçoit un context objet donnant accès au magasin de données et à l'enregistreur.
• schema (facultatif) : Un schéma Zod pour la validation des données.

Connexion du chargeur à une collection

Créez un fichier de configuration (par exemple, src/content/config.ts) pour définir votre collection :

<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>

Accès aux données

Dans un composant Astro, accédez aux données en utilisant 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>

Construire et exécuter

Exécutez npm run build. Le chargeur exécutera, récupérera et stockera les données de la blague. Le composant Astro affichera alors la blague récupérée.

Conclusion

Ceci illustre la construction d'un chargeur de collection Astro de base. Cette approche peut être étendue pour gérer des sources de données plus complexes et intégrer des fonctionnalités telles que la gestion des erreurs et la pagination. La conception modulaire permet de créer des chargeurs réutilisables, et éventuellement de les emballer pour une utilisation plus large.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!