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

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.
Un compte ButterCMS - Si vous n’avez pas de compte, vous pouvez vous inscrire pour un essai gratuit.
Votre jeton d’API ButterCMS - Vous pouvez trouver votre jeton d’API sur la page Paramètres (« Settings »).

Configuration

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
```
En savoir plus sur l’utilisation des variables d’environnement et les fichiers .env dans Astro.
Installez le SDK ButterCMS en tant que dépendance :
- npm
- pnpm
- Yarn
Fenêtre du terminal
npm install buttercms
Fenêtre du terminal
pnpm add buttercms
Fenêtre du terminal
yarn add buttercms

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

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.

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

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