Saltearse al contenido
Astro Astro

ButterCMS y Astro

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

Integrandolo con Astro

En esta sección, usaremos el SDK de ButterCMS para traer tus datos a tu proyecto Astro. Para empezar, necesitarás lo siguiente:

Prerequisitos

  1. Un proyecto Astro - Si aún no tienes un proyecto Astro, nuestra Guía de instalación te ayudará a comenzar en cuestión de minutos.

  2. Una cuenta de ButterCMS. Si aún no tienes una cuenta, puedes registrarte para una prueba gratuita.

  3. Tu token de API de ButterCMS - Puedes encontrar tu token de API en la página de Configuración.

Configuración

  1. Crea un archivo .env en la raíz de tu proyecto y agrega tu token de API como una variable de entorno:

    .env
    BUTTER_TOKEN=TU_TOKEN_DE_API_AQUI

  2. Instala el SDK de ButterCMS como una dependencia:

    Terminal window
    npm install buttercms

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

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

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

Esto autentica el SDK usando tu token de API y lo exporta para ser usado en todo tu proyecto.

Obteniendo datos

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

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

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

Similarmente, puedes obtener una página y mostrar sus campos:

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>

Recursos Oficiales

Recursos de la comunidad

  • ¡Agrega el tuyo!

Más guías de CMS