Prepr CMS y Astro
Prepr CMD es un CMS headless con personalización integrada.
Integración con Astro
Sección titulada Integración con AstroPrepr CMS proporciona una API GraphQL para conectar tus datos a Astro.
Prerrequisitos
Sección titulada PrerrequisitosPara empezar, necesitarás lo siguiente:
- Un proyecto de Astro nuevo o existente configurado para renderizado bajo demanda.
- Una cuenta Prepr gratis
- Un entorno Prepr con publicaciones de blog existentes. Estas publicaciones deben incluir un
title
ycontent
. Los otros campos son opcionales.
Configuración de credenciales
Sección titulada Configuración de credencialesPara agregar el endpoint de Prepr a tu proyecto de Astro, crea un archivo .env
en la raíz de tu proyecto si no existe y agrega la siguiente variable:
Encontrarás tu valor YOUR_PREPR_API_URL
en la configuración de tu cuenta Prepr:
- Ve a Settings > Access tokens para ver tus tokens de acceso de vista previa y producción.
- Usa el valor API URL del token de acceso GraphQL Production para solo recuperar elementos de contenido publicados para tu sitio de Astro.
Configuración del endpoint de Prepr
Sección titulada Configuración del endpoint de PreprCrea 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:
Tu directorio raíz ahora debería incluir estos archivos:
Directorylib/
- prepr.js
Directorysrc/
- …
- .env
- astro.config.mjs
- package.json
Obtención de datos
Sección titulada Obtención de datosObtendrás tus datos de Prepr escribiendo consultas para interactuar con su API GraphQL.
Crea una consulta GraphQL para recuperar tus artículos de blog:
Sección titulada Crea una consulta GraphQL para recuperar tus artículos de blog:-
Crea una nueva carpeta
src/queries/
y agrega un archivo llamadoget-articles.js
. -
Agrega la siguiente consulta a este archivo para recuperar todos los artículos:
-
Para mostrar una lista enlazada de tus publicaciones de blog en una página, importa y ejecuta tu consulta, incluyendo el endpoint de Prepr. Luego tendrás acceso a todos los títulos de tus publicaciones y sus slugs para renderizar en la página. (En el siguiente paso, crearás páginas individuales para tus publicaciones de blog.)
Tu directorio raíz ahora debería incluir estos archivos:
Directorylib/
- prepr.js
Directoryqueries /
- get-articles.js
Directorysrc/
- …
- .env
- astro.config.mjs
- package.json
Creación de páginas individuales para publicaciones de blog
Sección titulada Creación de páginas individuales para publicaciones de blogPara crear una página por cada publicación de blog, ejecutarás una nueva consulta GraphQL en una página .astro
de enrutamiento dinámico. Esta consulta obtendrá 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 carpetaqueries
y agrega lo siguiente para consultar un artículo específico por su slug y devolver datos como eltitle
ycontent
del artículo:
Puedes crear y probar consultas GraphQL utilizando el Apollo explorer en Prepr. Abre el API Explorer desde la página de elementos de contenido Article en Prepr. El contenido del artículo se almacena en un campo de contenido dinámico. Consulta la documentación de GraphQL para obtener más detalles sobre cómo obtener los datos dentro de este campo.
-
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:
La carpeta raíz de tu proyecto ahora debería incluir estos archivos:
Directorylib/
- prepr.js
Directoryqueries/
- get-articles.js
- get-article-by-slug.js
Directorysrc/
Directorypages/
- index.astro
- […slug].astro
- .env
- astro.config.mjs
- package.json
Ahora, cuando hagas clic en un enlace de artículo desde la lista principal de publicaciones de blog, se te llevará a una página con su contenido individual.
Publicar tu sitio
Sección titulada Publicar tu sitioPara desplegar tu blog de Prepr, visita nuestras guías de despliegue y sigue las instrucciones para tu proveedor de alojamiento preferido.
Recursos oficiales
Sección titulada Recursos oficiales- Sigue la guía de inicio rápido de Prepr CMS Astro para hacer un blog simple con Astro y Prepr CMS.
- Consulta la guía Conectar Prepr CMS a Astro para obtener una descripción general de los recursos de Astro y Prepr CMS.