Headless Statamic и Astro

Statamic — это современная файловая CMS. Она позволяет разработчикам легко создавать динамические веб-сайты и приложения, предоставляя редакторам контента интуитивно понятный и удобный интерфейс для управления контентом.

Интеграция с Astro

Statamic поставляется со встроенными REST API и GraphQL API для подключения ваших данных к Astro.

Предварительные требования

Для начала вам понадобится следующее:

REST API и GraphQL API доступны только в Pro-версии Statamic. Вы можете бесплатно попробовать Pro-версию на локальном компьютере.
Проект Astro — если вам ещё нужен проект Astro, наше руководство по установке поможет вам быстро начать работу.
Сайт на Statamic — если вам нужен сайт на Statamic, это руководство поможет вам начать. Не забудьте включить REST API или GraphQL API, добавив STATAMIC_API_ENABLED=true или STATAMIC_GRAPHQL_ENABLED=true в файл .env, и включите необходимые ресурсы в конфигурационном файле API.

Получение данных

REST API

Получите данные Statamic из URL REST API вашего сайта. По умолчанию это 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

Получите данные Statamic с помощью URL GraphQL API вашего сайта. По умолчанию это https://[YOUR-SITE]/graphql/. Затем вы можете отобразить свойства данных, используя директиву Astro set:html={}.

Например, для отображения списка заголовков и их контента из выбранной коллекции:

---
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 посетите наши руководства по развёртыванию (EN) и следуйте инструкциям для выбранного вами хостинг-провайдера.

Ресурсы сообщества

Дополнительные руководства по CMS

Все руководства по CMS

Внести свой вклад Сообщество Поддержать