Przejdź do głównej zawartości

Headless Statamic & Astro

Ta treść nie jest jeszcze dostępna w Twoim języku.

Statamic is a modern, flat-file CMS. It allows developers to easily create dynamic websites and applications while offering content editors an intuitive and user-friendly interface for managing content.

Statamic comes with a built-in REST API and GraphQL API to connect your data to Astro.

To get started, you will need to have the following:

  1. REST API and GraphQL API are only available in a pro version of Statamic. You can try the Pro version free on your local machine.
  2. An Astro project - If you still need an Astro project, our Installation guide will get you up and running quickly.
  3. A Statamic site - If you need a Statamic website, this guide will help you get started. Remember to enable REST API or GraphQL API by adding STATAMIC_API_ENABLED=true or STATAMIC_GRAPHQL_ENABLED=true in the .env file and enable required resources in the API configuration file.

Fetch your Statamic data from your site’s REST API URL. By default, it’s https://[YOUR-SITE]/api/. Then, you can render your data properties using Astro’s set:html={} directive.

For example, to display a list of titles and their content from a selected collection:

"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} />
))
}

Fetch your Statamic data with your site’s GraphQL API URL. By default, it’s https://[YOUR-SITE]/graphql/. Then, you can render your data properties using Astro’s set:html={} directive.

For example, to display a list of titles and their content from a selected collection:

"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} />
))
}

To deploy your Astro site visit our deployment guides and follow the instructions for your preferred hosting provider.

Więcej poradników CMS

Pomóż nam

Jak chcesz ją przekazać?

Otwórz Issue na GitHubie

Najszybszy sposób na powiadomienie nas o problemie.

Społeczność