Skip to content

Commit f48d28a

Browse files
marcos-corrochanomarcos-corrochano
authored
i18n(es): create buttercms.mdx (#14259)
1 parent 0eaddbe commit f48d28a

1 file changed

Lines changed: 141 additions & 0 deletions

File tree

‎src/content/docs/es/guides/cms/buttercms.mdx‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
---
2+
title: ButterCMS y Astro
3+
description: Agrega contenido a tu proyecto Astro usando ButterCMS
4+
sidebar:
5+
label: ButterCMS
6+
type: cms
7+
logo: buttercms
8+
stub: false
9+
i18nReady: true
10+
---
11+
12+
import { Steps } from '@astrojs/starlight/components';
13+
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
14+
15+
[ButterCMS](https://buttercms.com/) es un CMS headless y un motor de blogs que te permite publicar contenido estructurado para usarlo en tu proyecto.
16+
17+
## Integración con Astro
18+
19+
:::note
20+
Para ver un ejemplo completo de un blog, consulta el [Proyecto inicial Astro + ButterCMS](https://buttercms.com/starters/astro-starter-project/).
21+
:::
22+
23+
En esta sección, usaremos el [SDK de ButterCMS](https://www.npmjs.com/package/buttercms) para importar tus datos a tu proyecto Astro.
24+
25+
Para empezar, necesitarás lo siguiente:
26+
27+
### Prerequisitos
28+
29+
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.
30+
31+
2. **Una cuenta de ButterCMS** - Si aún no tienes una cuenta, puedes [registrarte](https://buttercms.com/join/) para disfrutar de una prueba gratuita.
32+
33+
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/).
34+
35+
### Configuración
36+
37+
<Steps>
38+
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:
39+
40+
```ini title=".env"
41+
BUTTER_TOKEN=YOUR_API_TOKEN_HERE
42+
```
43+
44+
:::tip
45+
Más información sobre [el uso de variables de entorno](/es/guides/environment-variables/) y los archivos `.env` en Astro.
46+
:::
47+
48+
2. Instala el SDK de ButterCMS como dependencia:
49+
50+
<PackageManagerTabs>
51+
<Fragment slot="npm">
52+
```shell
53+
npm install buttercms
54+
```
55+
</Fragment>
56+
<Fragment slot="pnpm">
57+
```shell
58+
pnpm add buttercms
59+
```
60+
</Fragment>
61+
<Fragment slot="yarn">
62+
```shell
63+
yarn add buttercms
64+
```
65+
</Fragment>
66+
</PackageManagerTabs>
67+
68+
3. Crea un archivo `buttercms.js` en un nuevo directorio `src/lib/` de tu proyecto:
69+
70+
```js title="src/lib/buttercms.js"
71+
import Butter from 'buttercms';
72+
73+
export const butterClient = Butter(import.meta.env.BUTTER_TOKEN);
74+
```
75+
</Steps>
76+
77+
**Esto autentica el SDK mediante tu token de la API y lo exporta para que puedas usarlo en todo tu proyecto.**
78+
79+
### Obtención de datos
80+
81+
Para obtener contenido, importa este cliente y usa una de sus funciones `retrieve`.
82+
83+
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`.
84+
85+
```astro title="src/pages/ShopItem.astro"
86+
---
87+
import { butterClient } from '../lib/buttercms';
88+
const response = await butterClient.content.retrieve(['shopitem']);
89+
90+
interface ShopItem {
91+
name: string,
92+
price: number,
93+
description: string,
94+
}
95+
96+
const items = response.data.data.shopitem as ShopItem[];
97+
---
98+
<body>
99+
{items.map(item => <div>
100+
<h2>{item.name} - ${item.price}</h2>
101+
<p set:html={item.description}></p>
102+
</div>)}
103+
</body>
104+
```
105+
106+
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.
107+
108+
Del mismo modo, puedes [recuperar una página](https://buttercms.com/docs/api/#get-a-single-page) y mostrar sus campos:
109+
110+
```astro title="src/pages/ShopItem.astro"
111+
---
112+
import { butterClient } from '../lib/buttercms';
113+
const response = await butterClient.page.retrieve('*', 'simple-page');
114+
const pageData = response.data.data;
115+
116+
interface Fields {
117+
seo_title: string,
118+
headline: string,
119+
hero_image: string,
120+
}
121+
122+
const fields = pageData.fields as Fields;
123+
---
124+
<html>
125+
<title>{fields.seo_title}</title>
126+
<body>
127+
<h1>{fields.headline}</h1>
128+
<img src={fields.hero_image} />
129+
</body>
130+
</html>
131+
```
132+
133+
## Recursos Oficiales
134+
135+
- [Proyecto inicial Astro + ButterCMS](https://buttercms.com/starters/astro-starter-project/).
136+
- La [documentación completa de la API de ButterCMS](https://buttercms.com/docs/api/).
137+
- [Guía de JavaScript](https://buttercms.com/docs/api-client/javascript/) de ButterCMS.
138+
139+
## Recursos de la comunidad
140+
141+
- ¡Agrega el tuyo!

0 commit comments

Comments
 (0)