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.

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

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

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

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

Plus de guides sur les CMS