AstroJS: Dev.to 콘텐츠를 쉽게 통합

블로그 템플릿을 사용하여 새 프로젝트 시작

npm create astro@latest ---템플릿 블로그

우리는 앱을 실행합니다

cd [프로젝트 이름] && npm run dev

Astro 5부터는 사이트 구축 중 모든 소스에서 데이터를 로드하고 간단하고 안전한 유형의 API를 통해 액세스할 수 있는 도구인 Content Layer API가 도입되었습니다.

이 API는 로컬 마크다운 파일, 원격 API, 콘텐츠 관리 시스템(CMS) 등 다양한 소스의 콘텐츠를 처리할 수 있는 유연성을 제공합니다. 특정 스키마를 사용하여 콘텐츠의 "컬렉션"을 정의하면 데이터를 효율적으로 구성하고 검증할 수 있습니다. 또한 Content Layer API는 콘텐츠가 많은 사이트의 성능을 향상시켜 빌드 시간을 단축하고 메모리 사용량을 줄입니다.

https://astro.build/blog/astro-5/

dev.to 게시물을 사이트에 통합하는 Astro의 Content Layer API

Astro의 Content Layer API를 사용하여 dev.to 게시물을 사이트에 통합할 수 있습니다. dev.to에 대한 특정 로더는 없지만 해당 API를 사용하고 Astro의 콘텐츠 컬렉션에 게시물을 저장하는 사용자 정의 로더를 만들 수 있습니다.

이를 달성하려면 다음 단계를 따르세요.

1. dev.to API에 대한 액세스 구성

프로젝트 루트에 .env 파일을 생성합니다
.env

DEV_TO_API_URL=https://dev.to/api/
DEV_API_KEY=tu_clave_de_api

2. Astro에서 컬렉션 정의

src/content.config.ts에서 Content Layer API를 사용하여 dev.to 게시물에 대한 컬렉션을 정의합니다.

Astro 템플릿으로 프로젝트를 생성하면 블로그용 컬렉션이 자동으로 생성됩니다

srccontent.config.ts

import { glob } from 'astro/loaders';
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
    // Load Markdown and MDX files in the `src/content/blog/` directory.
    loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
    // Type-check frontmatter using a schema
    schema: z.object({
        title: z.string(),
        description: z.string(),
        // Transform string to Date object
        pubDate: z.coerce.date(),
        updatedDate: z.coerce.date().optional(),
        heroImage: z.string().optional(),
    }),
});

export const collections = { blog };

이제 Dev.to 기사에 대한 컬렉션을 만듭니다

const devTo = defineCollection({
    loader: async () => {
        const headers = new Headers({
            "api-key": DEV_API_KEY,
        });
        const posts = await fetch(`${DEV_TO_API_URL}articles?username=jmr85`, {
            headers: headers
        }).then(res => res.json());

        return posts.map((post: any) => ({
        id: post.slug,
            title: post.title,
            description: post.description,
            pubDate: new Date(post.published_at),
            updatedDate: post.edited_at ? new Date(post.edited_at) : null,
            heroImage: post.cover_image || post.social_image,
        url: post.url,
        }));
    },
    schema: z.object({
        title: z.string(),
        description: z.string(),
        pubDate: z.coerce.date(),
        updatedDate: z.coerce.date().optional(),
        heroImage: z.string().nullable(),
    url: z.string(),
    }),
  });

export const collections = { blog, devTo };

의 전체 코드입니다. srccontent.config.ts

DEV_TO_API_URL=https://dev.to/api/
DEV_API_KEY=tu_clave_de_api

스키마의 필드 정의에 대한 세부정보를 살펴보세요. 필드는 Astro 템플릿의 블로그 컬렉션과 일치해야 하며 그런 다음 Dev.to 게시물 컬렉션에 특정 항목을 추가해야 합니다. 데이터 유형과 동일한 이름을 가져야 합니다. 이는 Astro 템플릿의 마크다운 게시물을 블로그 섹션의 Dev.to의 게시물과 "병합"할 수 있도록 하기 위한 것입니다.

3. 페이지에서 게시물을 사용하세요.

이제 getCollection을 사용하여 Astro 구성요소 또는 페이지의 dev.to 게시물에 액세스할 수 있습니다.

원래:

srcpagesblogindex.astro

import { glob } from 'astro/loaders';
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
    // Load Markdown and MDX files in the `src/content/blog/` directory.
    loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
    // Type-check frontmatter using a schema
    schema: z.object({
        title: z.string(),
        description: z.string(),
        // Transform string to Date object
        pubDate: z.coerce.date(),
        updatedDate: z.coerce.date().optional(),
        heroImage: z.string().optional(),
    }),
});

export const collections = { blog };

이제 devto인 경우 https://dev.to/{username}/{slug-article 사이트의 기사 URL로 리디렉션되는 인라인 조건을 사용하여 게시물을 반복하겠습니다. }

 {
                        post.map((게시물) => (
                            

저장소: https://github.com/jmr85/astro-devto

위 내용은 AstroJS: Dev.to 콘텐츠를 쉽게 통합의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!