컨텐츠로 건너뛰기

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={} 지시어를 사용하여 데이터 속성을 렌더링할 수 있습니다.

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

"src/pages/index.astro
---
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={} 지시어를 사용하여 데이터 속성을 렌더링할 수 있습니다.

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

"src/pages/index.astro
---
const graphqlQuery = {
query: `
query Entries($page: Int, $locale: String) {
entries(
collection: "posts"
sort: "date asc"
limit: 20
page: $page
filter: { locale: $locale }
) {
current_page
has_more_pages
data {
title
... on Entry_Posts_Post {
content
}
}
}
}
`,
variables: {
page: page,
locale: locale,
},
};
const res = await fetch("https://[YOUR-SITE]/graphql", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(graphqlQuery),
})
const { data } = await res.json();
const entries = data?.entries;
---
<h1>Astro + Statamic 🚀</h1>
{
entries.data.map((post) => (
<h2 set:html={post.title} />
<p set:html={post.content} />
))
}

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

더 많은 CMS 안내서