Bagaimana untuk membina pemuat koleksi Astro

Keluaran Astro 1.14 memperkenalkan API Lapisan Kandungan, memperluaskan koleksi kandungan melangkaui fail tempatan. Walaupun Astro menyediakan pemuat untuk sumber data biasa (RSS, CSV, dll.), membuat pemuat tersuai adalah mudah. Panduan ini menunjukkan membina pemuat untuk API jenaka ayah.

Persediaan Projek

Mulakan dengan mencipta projek Astro baharu:

npm create astro@latest

Ikuti gesaan CLI. Kemudian mulakan pelayan pembangunan:

npm run dev

Akses projek anda di http://localhost:4321.

Mendayakan API Eksperimen

API Lapisan Kandungan adalah percubaan. Dayakannya dengan mengubah suai astro.config.mjs:

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
    experimental: {
        contentLayer: true,
    },
});

Mencipta Pemuat

Buat fail baharu (cth., src/loaders/jokes.ts) untuk menempatkan pemuat anda. Contoh ini menggunakan TypeScript, walaupun ia tidak wajib.

// 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,
        });
    },
};

Pemuat terdiri daripada:

• name (diperlukan): Pengecam pemuat.
• load (diperlukan): Fungsi tak segerak mengambil dan memproses data. Ia menerima objek context yang menyediakan akses kepada stor data dan pembalak.
• schema (pilihan): Skema Zod untuk pengesahan data.

Menyambungkan Pemuat ke Koleksi

Buat fail konfigurasi (cth., src/content/config.ts) untuk menentukan koleksi anda:

// src/content/config.ts
import { defineCollection } from 'astro:content';
import { jokesLoader } from '../loaders/jokes';

const jokes = defineCollection({
    loader: jokesLoader,
});

export const collections = {
    jokes,
};

Mengakses Data

Dalam komponen Astro, akses data menggunakan getCollection:

---
import { getCollection } from 'astro:content';

const jokes = await getCollection('jokes');
---

<ul>
  {jokes.map(joke => <li>{joke.data.joke}</li>)}
</ul>

Membina dan Berlari

Lari npm run build. Pemuat akan melaksanakan, mengambil dan menyimpan data jenaka. Komponen Astro kemudiannya akan memaparkan jenaka yang diambil.

Kesimpulan

Ini menggambarkan membina pemuat koleksi Astro asas. Pendekatan ini boleh diperluaskan untuk mengendalikan sumber data yang lebih kompleks dan menggabungkan ciri seperti pengendalian ralat dan penomboran. Reka bentuk modular membolehkan untuk mencipta pemuat boleh guna semula, yang berpotensi membungkusnya untuk kegunaan yang lebih luas.

Atas ialah kandungan terperinci Bagaimana untuk membina pemuat koleksi Astro. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!