Skip to content

Latest commit

 

History

History
130 lines (101 loc) · 4.03 KB

buttercms.mdx

File metadata and controls

130 lines (101 loc) · 4.03 KB
Raw
title description type service stub i18nReady
ButterCMS y Astro
Agrega contenido a tu proyecto Astro usando ButterCMS
cms
ButterCMS
false
true

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.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

:::note Para ver un ejemplo completo de un sitio de blog, revisa el Proyecto de inicio de Astro + ButterCMS. ::: 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:

    BUTTER_TOKEN=TU_TOKEN_DE_API_AQUI

    :::tip Lee más sobre usar variables de entorno y archivos .env en Astro. :::

  2. Instala el SDK de ButterCMS como una dependencia: 

    npm install buttercms
    ```shell pnpm add buttercms ``` ```shell yarn add buttercms ```

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

    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.

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

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