Saltearse al contenido

Prepr CMS y Astro

Prepr CMD es un CMS headless con personalización integrada.

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

Para empezar, necesitarás lo siguiente:

Para 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:

.env
PREPR_ENDPOINT=YOUR_PREPR_API_URL

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

  1. Ve a Settings > Access tokens para ver tus tokens de acceso de vista previa y producción.

  2. 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 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:

src/lib/prepr.js
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:

  • Directorylib/
    • prepr.js
  • Directorysrc/
  • .env
  • astro.config.mjs
  • package.json

Obtendrá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:
  1. Crea una nueva carpeta src/queries/ y agrega un archivo llamado get-articles.js.

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

    src/queries/get-articles.js
    const GetArticles = `
    query {
    Articles {
    items {
    _id
    _slug
    title
    }
    }
    }
    `
    export default GetArticles
  3. 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.)

    src/pages/index.astro
    ---
    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="Mi sitio blog">
    <h1>
    Mi sitio blog
    </h1>
    <ul>
    {
    articles.items.map((post) => (
    <li>
    <a href={post._slug}>{post.title}</a>
    </li>
    ))
    }
    </ul>
    </Layout>

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 blog

Para 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.

  1. 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 content del artículo:

    src/lib/queries/get-article-by-slug.js
    const GetArticleBySlug = `
    query ($slug: String) {
    Article (slug: $slug) {
    _id
    title
    content {
    __typename
    ... on Text {
    body
    text
    }
    ... on Assets {
    items {
    url
    }
    }
    }
    }
    }`
    export default GetArticleBySlug
  2. 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:

    src/pages/[...slug].astro
    ---
    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>

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.

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

Más guías de CMS