컨텐츠로 이동

Headless Statamic & Astro

Statamic은 현대적인 플랫 파일 CMS입니다. 이를 통해 개발자는 동적 웹사이트와 애플리케이션을 쉽게 만들 수 있으며 콘텐츠 편집자에게는 콘텐츠 관리를 위한 직관적이고 사용자 친화적인 인터페이스를 제공합니다.

Statamic에는 데이터를 Astro에 연결하기 위한 REST APIGraphQL API가 내장되어 있습니다.

시작하려면 다음이 필요합니다.

  1. REST API 및 GraphQL API는 Statamic의 프로 버전에서만 사용할 수 있습니다. 로컬 장치에서 Pro 버전을 무료로 사용해 볼 수 있습니다.
  2. Astro 프로젝트 - Astro 프로젝트가 여전히 필요한 경우 설치 가이드를 통해 빠르게 시작하고 실행할 수 있습니다.
  3. Statamic 사이트 - Statamic 웹사이트가 필요한 경우 이 가이드가 시작하는 데 도움이 될 것입니다. .env 파일에 STATAMIC_API_ENABLED=true 또는 STATAMIC_GRAPHQL_ENABLED=true를 추가하여 REST API 또는 GraphQL API를 활성화하고 API 구성 파일에서 필수 리소스를 활성화해야 합니다.

사이트의 REST API URL에서 Statamic 데이터를 가져옵니다. 기본적으로 https://[YOUR-SITE]/api/입니다. 그런 다음 Astro의 set:html={} 지시어를 사용하여 데이터 속성을 렌더링할 수 있습니다.

예를 들어 선택한 컬렉션의 제목 및 해당 콘텐츠 목록을 표시하려면 다음을 수행하세요.

---
const res = await fetch("https://[YOUR-SITE]/api/collections/posts/entries?sort=-date")
const posts = await res.json()
---
<h1>Astro + Statamic 🚀</h1>
{
posts.map((post) => (
<h2 set:html={post.title} />
<p set:html={post.content} />
))
}

사이트의 GraphQL API URL을 사용하여 Statamic 데이터를 가져옵니다. 기본적으로 https://[YOUR-SITE]/graphql/입니다. 그런 다음 Astro의 set:html={} 지시어를 사용하여 데이터 속성을 렌더링할 수 있습니다.

예를 들어 선택한 컬렉션의 제목 및 해당 콘텐츠 목록을 표시하려면 다음을 수행하세요.

---
const res = await fetch("https://[YOUR-SITE]/graphql/",
{
method: 'POST',
headers: {'Content-Type':'application/json'},
body: JSON.stringify({
query: `
posts: entries(collection: "posts", sort: "date desc") {
data {
title
... on Entry_Posts_Post {
content
}
}
}
`
}),
});
const entries = await res.json()
---
<h1>Astro + Statamic 🚀</h1>
{
entries.data.posts.data.map((post) => (
<h2 set:html={post.title} />
<p set:html={post.content} />
))
}

Astro 사이트를 배포하려면 배포 가이드를 방문하여 선호하는 호스팅 제공업체의 지침을 따르세요.

더 많은 CMS 안내서