컨텐츠로 이동

ButterCMS & Astro

ButterCMS는 프로젝트에 사용할 구조화된 콘텐츠를 게시할 수 있는 헤드리스 CMS 및 블로그 엔진입니다.

이 섹션에서는 ButterCMS SDK를 사용하여 데이터를 Astro 프로젝트로 가져옵니다. 시작하려면 다음이 필요합니다.

  1. Astro 프로젝트 - 아직 Astro 프로젝트가 없다면 설치 가이드를 참조하여 즉시 설치하고 실행할 수 있습니다.

  2. ButterCMS 계정. 계정이 없다면 무료 평가판에 가입할 수 있습니다.

  3. ButterCMS API 토큰 - 설정 페이지에서 API 토큰을 찾을 수 있습니다.

  1. 프로젝트 루트에 .env 파일을 만들고 API 토큰을 환경 변수로 추가합니다.

    .env
    BUTTER_TOKEN=YOUR_API_TOKEN_HERE
  2. ButterCMS SDK를 종속성으로 설치합니다.

    Terminal window
    npm install buttercms
  3. 프로젝트의 새 src/lib/ 디렉터리에 buttercms.js 파일을 만듭니다.

    src/lib/buttercms.js
    import Butter from "buttercms";
    export const butterClient = Butter(import.meta.env.BUTTER_TOKEN);

API 토큰을 사용하여 SDK를 인증하고 프로젝트 전체에서 사용할 수 있도록 내보냅니다.

콘텐츠를 가져오려면 이 클라이언트를 가져오고 해당 retrieve 함수 중 하나를 사용하세요.

이 예시에서는 짧은 텍스트 name, 숫자 price 및 WYSIWYG description의 세 가지 필드가 있는 컬렉션을 검색합니다.

src/pages/ShopItem.astro
---
import { butterClient } from "../lib/buttercms";
const response = await butterClient.content.retrieve(["shopitem"]);
interface ShopItem {
name: string,
price: number,
description: string,
}
const items = response.data.data.shopitem as ShopItem[];
---
<body>
{items.map(item => <div>
<h2>{item.name} - ${item.price}</h2>
<p set:html={item.description}></p>
</div>)}
</body>

인터페이스는 필드 타입을 반영합니다. WYSIWYG description 필드는 HTML 문자열로 로드되며 set:html을 통해 이를 렌더링할 수 있습니다.

마찬가지로 페이지를 검색하고 해당 필드를 표시할 수 있습니다.

src/pages/ShopItem.astro
---
import { butterClient } from "../lib/buttercms";
const response = await butterClient.page.retrieve("*", "simple-page");
const pageData = response.data.data;
interface Fields {
seo_title: string,
headline: string,
hero_image: string,
}
const fields = pageData.fields as Fields;
---
<html>
<title>{fields.seo_title}</title>
<body>
<h1>{fields.headline}</h1>
<img src={fields.hero_image} />
</body>
</html>
  • 여러분의 자료를 추가하세요!

더 많은 CMS 안내서