statamic.mdx

title	description	type	stub	service	i18nReady
Statamic & Astro	Ajouter du contenu à votre projet Astro en utilisant Statamic comme CMS	cms	false	Statamic	true

import Grid from '/components/FluidGrid.astro' import Card from '/components/ShowcaseCard.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

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

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.

:::caution Tous les exemples supposent que votre site web a une collection appelée posts, qui a un plan appelé post, et que ce plan a un champ title (fieldtype text) et un content (fieldtype markdown). :::

Récupération de données

:::caution Si vous utilisez Statamic et Astro sur votre machine locale, n'oubliez pas d'utiliser 127.0.0.1 au lieu de localhost lorsque vous récupérez l'API.

Lors d'une requête sur le serveur Astro, localhost n'est pas résolu correctement comme il l'est dans le navigateur, et toute récupération vers l'une ou l'autre API échouera. :::

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 :

---
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

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 :

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

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

• Comment construire un site statique en utilisant Statamic comme headless CMS
• Mise en œuvre des aperçus en direct Astro avec Statamic

Thèmes