Aller au contenu

Statamic & Astro

Statamic est un système de gestion de contenu (CMS) moderne et uniforme. Il permet aux développeurs de créer facilement des sites web et des applications dynamiques tout en offrant aux éditeurs de contenu une interface intuitive et conviviale pour la gestion du contenu.

Intégration avec Astro

Titre de la section Intégration avec Astro

Statamic est livré avec une API REST et une API GraphQL intégrées pour connecter vos données à Astro.

Prérequis

Titre de la section Prérequis

Pour commencer, vous devez disposer des éléments suivants :

  1. Les API REST et GraphQL ne sont disponibles que dans la version pro de Statamic. Vous pouvez essayer la version Pro gratuitement sur votre machine locale.
  2. Un projet Astro - Si vous avez besoin d’un projet Astro, notre Guide d’installation vous permettra d’être rapidement opérationnel.
  3. Un site Statamic - Si vous avez besoin d’un site Statamic, ce guide vous aidera à démarrer. N’oubliez pas d’activer l’API REST ou l’API GraphQL en ajoutant STATAMIC_API_ENABLED=true ou STATAMIC_GRAPHQL_ENABLED=true dans le fichier .env et d’activer les ressources nécessaires dans le fichier de configuration de l’API.

Récupération de données

Titre de la section Récupération de données

API REST

Titre de la section API REST

Récupérez vos données Statamic à partir de l’URL de l’API REST de votre site. Par défaut, c’est https://[VOTRE-SITE]/api/. Ensuite, vous pouvez rendre les propriétés de vos données en utilisant la directive Astro set:html={}.

Par exemple, pour afficher une liste de titres et leur contenu à partir d’une collection sélectionnée :

"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

Titre de la section GraphQL

Récupérez vos données Statamic avec l’URL de l’API GraphQL de votre site. Par défaut, c’est https://[VOTRE-SITE]/graphql/. Ensuite, vous pouvez rendre les propriétés de vos données en utilisant la directive Astro set:html={}.

Par exemple, pour afficher une liste de titres et leur contenu à partir d’une collection sélectionnée :

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

Publier votre site

Titre de la section Publier votre site

Pour déployer votre site Astro, consultez nos guides de déploiement et suivez les instructions de votre hébergeur préféré.

Ressources communautaires

Titre de la section Ressources communautaires

Thèmes

Titre de la section Thèmes

Plus de guides sur les CMS