테스트 개발.to

아스트로 블로그 템플릿 설치화면 첨부

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

우리는 앱을 실행합니다

npm 실행 개발

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에 대한 액세스 구성

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

2. 게시물을 가져오는 함수를 만듭니다.

프로젝트의 src/lib/ 폴더에서 다음 기능을 사용하여 getArticles.js 파일을 생성하여 게시물을 가져옵니다.

const { DEV_API_KEY, DEV_TO_API_URL } = import.meta.env;

export async function fetchArticles() {
  const res = await fetch(`${DEV_TO_API_URL}articles/me/published`, {
    headers: {
      "api-key": DEV_API_KEY,
    },
  });
  const data = await res.json();
  return data;
}

3. Astro에서 컬렉션 정의

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

import { glob } from 'astro/loaders';
import { defineCollection, z } from 'astro:content';
import { fetchArticles } from "../lib/getArticles";

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

const devTo = defineCollection({
  loader: async () => {
    const articles = await fetchArticles();
    return articles.map((article) => ({
      id: article.id.toString(),
      slug: article.slug,
      body: article.body_markdown,
      data: {
        title: article.title,
        date: new Date(article.published_at),
        tags: article.tag_list,
        summary: article.description,
        image: article.social_image,
      },
    }));
  },
});

export const collections = { blog, devto };

위 내용은 테스트 개발.to의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!