diff --git a/src/content/docs/es/guides/cms/buttercms.mdx b/src/content/docs/es/guides/cms/buttercms.mdx new file mode 100644 index 0000000000000..cc69868fbc40a --- /dev/null +++ b/src/content/docs/es/guides/cms/buttercms.mdx @@ -0,0 +1,141 @@ +--- +title: ButterCMS y Astro +description: Agrega contenido a tu proyecto Astro usando ButterCMS +sidebar: + label: ButterCMS +type: cms +logo: buttercms +stub: false +i18nReady: true +--- + +import { Steps } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; + +[ButterCMS](https://buttercms.com/) es un CMS headless y un motor de blogs que te permite publicar contenido estructurado para usarlo en tu proyecto. + +## Integración con Astro + +:::note +Para ver un ejemplo completo de un blog, consulta el [Proyecto inicial Astro + ButterCMS](https://buttercms.com/starters/astro-starter-project/). +::: + +En esta sección, usaremos el [SDK de ButterCMS](https://www.npmjs.com/package/buttercms) para importar 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](/es/install-and-setup/) te permitirá ponerlo en marcha en un momento. + +2. **Una cuenta de ButterCMS** - Si aún no tienes una cuenta, puedes [registrarte](https://buttercms.com/join/) para disfrutar de una prueba gratuita. + +3. **Tu token de la API de ButterCMS** - Puedes encontrar tu token de la API en la página [configuración](https://buttercms.com/settings/). + +### Configuración + + +1. Crea un archivo `.env` en el directorio raíz de tu proyecto y añade tu token de la API como variable de entorno: + + ```ini title=".env" + BUTTER_TOKEN=YOUR_API_TOKEN_HERE + ``` + + :::tip + Más información sobre [el uso de variables de entorno](/es/guides/environment-variables/) y los archivos `.env` en Astro. + ::: + +2. Instala el SDK de ButterCMS como dependencia: + + + + ```shell + npm install buttercms + ``` + + + ```shell + pnpm add buttercms + ``` + + + ```shell + yarn add buttercms + ``` + + + +3. Crea un archivo `buttercms.js` en un nuevo directorio `src/lib/` de tu proyecto: + + ```js title="src/lib/buttercms.js" + 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](https://buttercms.com/docs/api/#retrieve-a-collection) que tiene tres campos: un texto breve `name`, un número `price` y un campo WYSIWYG `description`. + +```astro title="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[]; +--- + + {items.map(item =>
+

{item.name} - ${item.price}

+

+
)} + +``` + +La interfaz refleja los tipos de campo. El campo `description` de tipo WYSIWYG se carga como una cadena de texto HTML, y [`set:html`](/es/reference/directives-reference/#sethtml) te permite mostrarlo. + +Del mismo modo, puedes [recuperar una página](https://buttercms.com/docs/api/#get-a-single-page) y mostrar sus campos: + +```astro title="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; +--- + + {fields.seo_title} + +

{fields.headline}

+ + + +``` + +## Recursos Oficiales + +- [Proyecto inicial Astro + ButterCMS](https://buttercms.com/starters/astro-starter-project/). +- La [documentación completa de la API de ButterCMS](https://buttercms.com/docs/api/). +- [Guía de JavaScript](https://buttercms.com/docs/api-client/javascript/) de ButterCMS. + +## Recursos de la comunidad + +- ¡Agrega el tuyo!