Aller au contenu
Astro Astro

ButterCMS & Astro

ButterCMS est un CMS headless et un moteur de blog, qui vous permet de publier du contenu structuré, et de l’utiliser dans votre projet.

Intégrer avec Astro

Dans cet section, nous allons utiliser le SDK ButterCMS pour intégrer vos données dans votre projet Astro. Pour démarrer, vous aurez besoin de ce qui suit :

Prérequis

  1. Un projet Astro - Si vous n’avez pas encore de projet Astro, notre guide d’installation vous permettra de démarrer en un rien de temps.

  2. Un compte ButterCMS - Si vous n’avez pas de compte, vous pouvez vous inscrire pour un essai gratuit.

  3. Votre jeton d’API ButterCMS - Vous pouvez trouver votre jeton d’API sur la page Paramètres.

Configuration

  1. Créez un fichier .env dans le dossier racine de votre projet, et ajoutez votre jeton d’API en tant que variable d’environnement :

    .env
    BUTTER_TOKEN=VOTRE_JETON_API_ICI

  2. Installer le SDK ButterCMS en tant que dépendance :

    Terminal window
    npm install buttercms

  3. Créez un fichier buttercms.js dans un nouveau répertoire src/lib/ de votre projet :

    src/lib/buttercms.js
    import Butter from "buttercms";
    

    export const butterClient = Butter(import.meta.env.BUTTER_TOKEN);

Cela authentifie le SDK en utilisant votre jeton d’API et l’exporte pour être utilisé dans tout votre projet.

Récupération de données

Pour récupérer du contenu, importez ce client et utilisez l’une de ses fonctions retrieve.

Dans cet exemple, nous récupérons une collection qui a trois champs : un texte court name, un nombre price, et une WYSIWYG description.

src/pages/ShopItem.astro
---
import { butterClient } from "../lib/buttercms";
const response = await butterClient.content.retrieve(["shopitem"]);


interface ShopItem {
  name: string,
  price: number,
  description: string,
}


const items = response.data.data.shopitem as ShopItem[];
---
<body>
  {items.map(item => <div>
    <h2>{item.name} - ${item.price}</h2>
    <p set:html={item.description}></p>
  </div>)}
</body>

L’interface reflète les types de champs. Le champ WYSIWYG description se charge comme une chaîne HTML, et set:html vous permet de l’afficher.

De même, vous pouvez récupérer une page et afficher ses champs :

src/pages/ShopItem.astro
---
import { butterClient } from "../lib/buttercms";
const response = await butterClient.page.retrieve("*", "simple-page");
const pageData = response.data.data;


interface Fields {
  seo_title: string,
  headline: string,
  hero_image: string,
}


const fields = pageData.fields as Fields;
---
<html>
  <title>{fields.seo_title}</title>
  <body>
    <h1>{fields.headline}</h1>
    <img src={fields.hero_image} />
  </body>
</html>

Ressources officielles

Ressources communautaires

  • Ajoutez la vôtre !

Plus de guides sur les CMS