Prepr CMS & Astro

Prepr CMS es un CMS headless con personalización incorporada.

Integración con Astro

Prepr CMS proporciona una GraphQL API para conectar tus datos a Astro.

Requisitos previos

Para empezar, necesitarás lo siguiente:

Un proyecto de Astro nuevo o existente configurado para renderizado bajo demanda.
Una cuenta gratuita de Prepr
Un entorno de Prepr con publicaciones de blog existentes. Estas publicaciones deben incluir un title y un content. Los demás campos son opcionales.

Configuración de credenciales

Para agregar el endpoint de Prepr a tu proyecto de Astro, crea un archivo .env en la raíz de tu proyecto si aún no existe y agrega la siguiente variable:

PREPR_ENDPOINT=YOUR_PREPR_API_URL

Encontrarás el valor de tu YOUR_PREPR_API_URL en la configuración de tu cuenta de Prepr:

Go to Settings > Access tokens to view both your Preview and Production access tokens.
Usa el valor de la API URL del token de acceso de GraphQL Production para recuperar únicamente elementos de contenido publicados para tu sitio de Astro.

Configurando el endpoint de Prepr

Crea una nueva carpeta src/lib/ y agrega un nuevo archivo llamado prepr.js. Aquí es donde configurarás el endpoint de Prepr. Agrega el siguiente código para obtener tus datos de Prepr CMS:

export async function Prepr(query, variables) {
    const response = await fetch(import.meta.env.PREPR_ENDPOINT, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ query, variables }),
    })
    return response
}

Tu directorio raíz ahora debería incluir estos archivos:

Directoriosrc/
- Directoriolib/
  - prepr.js
.env
astro.config.mjs
package.json

Obtención de datos

Obtendrás tus datos de Prepr escribiendo consultas para interactuar con su GraphQL API.

Crea una consulta GraphQL para recuperar tus artículos de blog:

Crea una nueva carpeta src/queries/ y agrega un archivo llamado get-articles.js.

Agrega la siguiente consulta a este archivo para recuperar todos los artículos:

const GetArticles = `
query {
    Articles {
      items {
        _id
        _slug
        title
    }
  }
}
`
export default GetArticles

Para mostrar una lista enlazada de tus publicaciones de blog en una página, importa y ejecuta tu consulta, incluyendo el endpoint de Prepr necesario. Luego tendrás acceso a todos los títulos de tus publicaciones y sus slugs para renderizarlos en la página. (En el siguiente paso, crearás páginas individuales para tus publicaciones de blog.)

---
import Layout from '../layouts/Layout.astro';
import { Prepr } from '../lib/prepr.js';
import GetArticles from '../queries/get-articles.js';

const response = await Prepr(GetArticles)
const { data } = await response.json()
const articles = data.Articles
---

<Layout title="My blog site">
  <h1>
    My blog site
  </h1>
  <ul>
    {
      articles.items.map((post) => (
        <li>
          <a href={post._slug}>{post.title}</a>
        </li>
      ))
    }
  </ul>
</Layout>

Tu directorio raíz debería incluir estos nuevos archivos:

Directoriosrc/
- Directoriolib/
  - prepr.js
- Directoriopages/
  - index.astro
- Directorioqueries /
  - get-articles.js
.env
astro.config.mjs
package.json

Creando páginas de publicaciones de blog individuales

Para crear una página para cada publicación de blog, ejecutarás una nueva consulta GraphQL en una página .astro de enrutamiento dinámico. Esta consulta recuperará un artículo específico por su slug y se creará una nueva página para cada publicación de blog individual.

Crea un archivo llamado get-article-by-slug.js en la carpeta queries y agrega lo siguiente para consultar un artículo específico por su slug y devolver datos como el title y el content del artículo:

const GetArticleBySlug = `
query ($slug: String) {
   Article (slug: $slug) {
     _id
     title
     content {
       __typename
       ... on Text {
         body
         text
       }
       ... on Assets {
         items {
           url
         }
       }
     }
   }
}`

export default GetArticleBySlug

Dentro de la carpeta src/pages, crea un archivo llamado […slug].astro. Agrega el siguiente código para importar y ejecutar la consulta del paso anterior y mostrar el artículo recuperado:

---
import Layout from '../layouts/Layout.astro';
import {Prepr} from '../lib/prepr.js';
import GetArticleBySlug from '../queries/get-article-by-slug.js';

const { slug } = Astro.params;
const response = await Prepr(GetArticleBySlug, {slug})
const { data } = await response.json()
const article = data.Article
---

<Layout title={article.title}>
  <main>
    <h1>{article.title}</h1>
    {
      article.content.map((content) => (
        <div>
          {
            content.__typename === "Assets" &&
            <img src={content.items[0].url} width="300" height="250"/>
          }
          {
            content.__typename === 'Text' &&
            <div set:html={content.body}></div>
          }
        </div>
      ))
    }
  </main>
</Layout>

Tu directorio raíz ahora debería incluir estos nuevos archivos:

Directoriosrc/
- Directoriolib/
  - prepr.js
- Directoriopages/
  - index.astro
  - […slug].astro
- Directorioqueries/
  - get-articles.js
  - get-article-by-slug.js
.env
astro.config.mjs
package.json

Ahora, cuando hagas clic en un enlace de artículo de la lista principal de publicaciones del blog, se te dirigirá a una página con su contenido individual.

Publicando tu sitio

Para desplegar tu blog de Prepr, visita nuestras guías de despliegue y sigue las instrucciones para tu proveedor de alojamiento preferido.

Recursos oficiales

Sigue la guía de inicio rápido de Prepr CMS con Astro para hacer un blog sencillo con Astro y Prepr CMS.
Consulta la guía de Conexión de Prepr CMS a Astro para obtener una descripción general de los recursos de Astro y Prepr CMS.

Más guías de CMS

Socios de CMS destacados

CloudCannon

CMS basado en Git creado para mayor velocidad, seguridad y cero dolores de cabeza.

Todas las guías de CMS

Contribuir Comunidad Patrocinar