ButterCMS y Astro

ButterCMS es un CMS headless y un motor de blogs que te permite publicar contenido estructurado para usarlo en tu proyecto.

Integración con Astro

En esta sección, usaremos el SDK de ButterCMS para importar tus datos a tu proyecto Astro.

Para empezar, necesitarás lo siguiente:

Prerequisitos

Un proyecto Astro - Si aún no tienes un proyecto Astro, nuestra Guía de instalación te permitirá ponerlo en marcha en un momento.
Una cuenta de ButterCMS - Si aún no tienes una cuenta, puedes registrarte para disfrutar de una prueba gratuita.
Tu token de la API de ButterCMS - Puedes encontrar tu token de la API en la página configuración.

Configuración

Crea un archivo .env en el directorio raíz de tu proyecto y añade tu token de la API como variable de entorno:
.env
```
BUTTER_TOKEN=YOUR_API_TOKEN_HERE
```
Más información sobre el uso de variables de entorno y los archivos .env en Astro.
Instala el SDK de ButterCMS como dependencia:
- npm
- pnpm
- Yarn
Terminal window
npm install buttercms
Terminal window
pnpm add buttercms
Terminal window
yarn add buttercms

Crea un archivo buttercms.js en un nuevo directorio src/lib/ de tu proyecto:

import Butter from 'buttercms';

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

Esto autentica el SDK mediante tu token de la API y lo exporta para que puedas usarlo en todo tu proyecto.

Obtención de datos

Para obtener contenido, importa este cliente y usa una de sus funciones retrieve.

En este ejemplo, recuperamos una colección que tiene tres campos: un texto breve name, un número price y un campo 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>

La interfaz refleja los tipos de campo. El campo description de tipo WYSIWYG se carga como una cadena de texto HTML, y set:html te permite mostrarlo.

Del mismo modo, puedes recuperar una página y mostrar sus campos:

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