So bauen Sie einen Astro-Sammlungslader

Mit der Version 1.14 von Astro wurde die Content Layer API eingeführt, die Inhaltssammlungen über lokale Dateien hinaus erweitert. Während Astro Loader für gängige Datenquellen (RSS, CSV usw.) bereitstellt, ist das Erstellen benutzerdefinierter Loader unkompliziert. Diese Anleitung zeigt den Aufbau eines Loaders für eine Dad-Witz-API.

Projekteinrichtung

Beginnen Sie mit der Erstellung eines neuen Astro-Projekts:

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

Folgen Sie den CLI-Anweisungen. Starten Sie dann den Entwicklungsserver:

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

Zugriff auf Ihr Projekt unter http://localhost:4321.

Aktivieren der experimentellen API

Die Content Layer API ist experimentell. Aktivieren Sie es, indem Sie astro.config.mjs:

ändern

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

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

Erstellen des Loaders

Erstellen Sie eine neue Datei (z. B. src/loaders/jokes.ts), um Ihren Lader unterzubringen. In diesem Beispiel wird TypeScript verwendet, obwohl dies nicht obligatorisch ist.

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

Ein Lader besteht aus:

• name (erforderlich): Die Kennung des Laders.
• load (erforderlich): Die asynchrone Funktion zum Abrufen und Verarbeiten von Daten. Es erhält ein context-Objekt, das Zugriff auf den Datenspeicher und Logger ermöglicht.
• schema (optional): Ein Zod-Schema zur Datenvalidierung.

Verbinden des Loaders mit einer Sammlung

Erstellen Sie eine Konfigurationsdatei (z. B. src/content/config.ts), um Ihre Sammlung zu definieren:

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

Zugriff auf die Daten

Greifen Sie in einer Astro-Komponente mit getCollection:

auf die Daten zu

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

Bauen und Laufen

Ausführen npm run build. Der Loader führt die Witzdaten aus, ruft sie ab und speichert sie. Die Astro-Komponente zeigt dann den abgerufenen Witz an.

Fazit

Dies veranschaulicht den Aufbau eines einfachen Astro-Sammlungsladers. Dieser Ansatz kann erweitert werden, um komplexere Datenquellen zu verarbeiten und Funktionen wie Fehlerbehandlung und Paginierung zu integrieren. Das modulare Design ermöglicht die Erstellung wiederverwendbarer Lader und möglicherweise deren Verpackung für eine breitere Verwendung.

Das obige ist der detaillierte Inhalt vonSo bauen Sie einen Astro-Sammlungslader. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!