title | description | type | service | stub | i18nReady |
---|---|---|---|---|---|
ButterCMS & Astro |
Ajouter du contenu à votre projet Astro en utilisant ButterCMS |
cms |
ButterCMS |
false |
true |
import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.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.
:::note Pour un exemple de site de blog complet, voir le Projet de démarrage Astro + ButterCMS. ::: 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 :
-
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.
```ini title=".env"
BUTTER_TOKEN=VOTRE_JETON_API_ICI
```
:::tip
En savoir plus sur [l'utilisation des variables d'environnement](/fr/guides/environment-variables/) et les fichiers `.env` dans Astro.
:::
-
Installer le SDK ButterCMS en tant que dépendance :
shell npm install buttercms
shell pnpm add buttercms
shell yarn add buttercms
-
Créez un fichier
buttercms.js
dans un nouveau répertoiresrc/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.
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>
- Projet de démarrage Astro + ButterCMS
- La documentation complète de l'API ButterCMS
- Le guide JavaScript de ButterCMS
- Ajoutez la vôtre !