Astro 컬렉션 로더를 구축하는 방법

Astro의 1.14 릴리스에서는 Content Layer 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 활성화

Content Layer 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!