Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 65 additions & 0 deletions src/content/docs/es/guides/cms/caisy.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
---
title: Caisy y Astro
description: Agrega contenido a tu proyecto Astro usando Caisy como CMS
sidebar:
label: Caisy
type: cms
logo: caisy
i18nReady: true
stub: true
---

[Caisy](https://caisy.io/) es un CMS headless que expone una API de GraphQL para acceder al contenido.

## Cómo usar Caisy CMS con Astro

Usa `graphql-request` y el renderizador de texto enriquecido de Caisy para Astro para recuperar los datos de tu CMS y mostrar tu contenido en una página Astro:

```astro title="src/pages/blog/[...slug].astro"
---
import RichTextRenderer from '@caisy/rich-text-astro-renderer';
import { gql, GraphQLClient } from 'graphql-request';

const params = Astro.params;

const client = new GraphQLClient(
`https://cloud.caisy.io/api/v3/e/${import.meta.env.CAISY_PROJECT_ID}/graphql`,
{
headers: {
'x-caisy-apikey': import.meta.env.CAISY_API_KEY
}
}
);

const gqlResponse = await client.request(
gql`
query allBlogArticle($slug: String) {
allBlogArticle(where: { slug: { eq: $slug } }) {
edges {
node {
text {
json
}
title
slug
id
}
}
}
}
`,
{ slug: params.slug }
);

const post = gqlResponse?.allBlogArticle?.edges?.[0]?.node;
---
<h1>{post.title}</h1>
<RichTextRenderer node={post.text.json} />
```

## Recursos oficiales

- Consulta el ejemplo de Caisy + Astro en [GitHub](https://github.com/caisy-io/caisy-example-astro) o [StackBlitz](https://stackblitz.com/github/caisy-io/caisy-example-astro?file=src%2Fpages%2Fblog%2F%5B...slug%5D.astro).
- Realiza búsquedas en tus documentos en [modo borrador](https://caisy.io/developer/docs/external-api/localization-and-preview#preview-mode-15) y en varias [configuraciones regionales](https://caisy.io/developer/docs/external-api/localization-and-preview#localization-in-a-graphql-query-8).
- Usa [paginación](https://caisy.io/developer/docs/external-api/queries-pagination) para consultar grandes cantidades de documentos.
- Usa [filter](https://caisy.io/developer/docs/external-api/external-filter-and-sorting) en tus consultas y [order](https://caisy.io/developer/docs/external-api/external-filter-and-sorting#sorting-8) los resultados.
Loading