Payload CMS & Astro

PayloadCMS es un sistema de gestión de contenido headless de código abierto que se puede utilizar para proporcionar contenido para tu proyecto de Astro.

Integración con Astro

Requisitos previos

Un proyecto de Astro - Si aún no tienes un proyecto de Astro, nuestra guía de instalación te pondrá en marcha en poco tiempo.
Una base de datos MongoDB - PayloadCMS te pedirá una cadena de conexión de MongoDB al crear un nuevo proyecto. Puedes configurar una localmente o usar MongoDBAtlas para alojar una base de datos en la web de forma gratuita.
Una REST API de PayloadCMS - Crea un proyecto de PayloadCMS y conéctalo a tu base de datos MongoDB durante la configuración.

Configuración de Astro para tu colección de PayloadCMS

La plantilla de tu proyecto Payload contendrá un archivo llamado Posts.ts en src/collections/. Si no elegiste una plantilla durante la instalación que creara una colección de contenido para ti, puedes crear una nueva colección de Payload CMS agregando este archivo de configuración manualmente. El ejemplo a continuación muestra este archivo para una colección llamada posts que requiere los campos title, content y slug:

import { CollectionConfig } from "payload/types";

const Posts: CollectionConfig = {
  slug: "posts",
  admin: {
    useAsTitle: "title",
  },
  access: {
    read: () => true,
  },

  fields: [
    {
      name: "title",
      type: "text",
      required: true,
    },
    {
      name: "content",
      type: "text",
      required: true,
    },
    {
      name: "slug",
      type: "text",
      required: true,
    },
  ],
};

export default Posts;

Importa y agrega tanto Users (disponible en todos los proyectos de PayloadCMS) como cualquier otra colección (p. ej. Posts) a las colecciones disponibles en el archivo payload.config.ts.

import { buildConfig } from "payload/config";
import path from "path";

import Users from "./collections/Users";
import Posts from "./collections/Posts";

export default buildConfig({
  serverURL: "http://localhost:4321",
  admin: {
    user: Users.slug,
  },
  collections: [Users, Posts],
  typescript: {
    outputFile: path.resolve(__dirname, "payload-types.ts"),
  },
  graphQL: {
    schemaOutputFile: path.resolve(__dirname, "generated-schema.graphql"),
  },
});

Esto hará que aparezca una nueva colección llamada "Posts" en tu panel de control de PayloadCMS junto a la colección "Users".

Entra en la colección "Posts" y crea una nueva publicación. Después de guardarla, verás que la URL de la API aparece en la esquina inferior derecha.

Con el servidor de desarrollo en funcionamiento, abre http://localhost:4321/api/posts en tu navegador. Deberías ver un archivo JSON que contiene la publicación que creaste como un objeto.

{
  "docs":[
      {
        "id":"64098b16483b0f06a7e20ed4",
        "title":"Astro & PayloadCMS Title 🚀",
        "content":"Astro & PayloadCMS Content",
        "slug":"astro-payloadcms-slug",
        "createdAt":"2023-03-09T07:30:30.837Z",
        "updatedAt":"2023-03-09T07:30:30.837Z"
      }
  ],
  "totalDocs":1,
  "limit":10,
  "totalPages":1,
  "page":1,
  "pagingCounter":1,
  "hasPrevPage":false,
  "hasNextPage":false,
  "prevPage":null,
  "nextPage":null
}

Obtención de datos

Obtén tus datos de PayloadCMS a través de la URL única de la REST API de tu sitio y la ruta de tu contenido. (Por defecto, PayloadCMS montará todas las rutas a través de /api.) Luego, puedes renderizar las propiedades de tus datos utilizando la directiva set:html="" de Astro.

Junto con tu publicación, PayloadCMS devolverá algunos metadatos de nivel superior. Los documentos reales están anidados dentro del array docs.

Por ejemplo, para mostrar una lista de títulos de publicaciones y su contenido:

---
import HomeLayout from "../layouts/HomeLayout.astro";

const res = await fetch("http://localhost:5000/api/posts") // http://localhost:4321/api/posts by default
const posts = await res.json()
---

<HomeLayout title='Astro Blog'>
  {
    posts.docs.map((post) => (
        <h2 set:html={post.title} />
        <p set:html={post.content} />
    ))
  }
</HomeLayout>

Construyendo un blog con PayloadCMS y Astro

Crea una página de índice de blog src/pages/index.astro para enumerar cada una de tus publicaciones con un enlace a su propia página.

La obtención de datos a través de la API devuelve un array de objetos (publicaciones) que incluyen, entre otras, las siguientes propiedades:

title
content
slug

---
import HomeLayout from "../layouts/HomeLayout.astro";

const res = await fetch("http://localhost:5000/api/posts") // http://localhost:4321/api/posts by default
const posts = await res.json()
---

<HomeLayout title='Astro Blog'>
  <h1>Astro + PayloadCMS 🚀</h1>
  <h2>Blog posts list:</h2>
  <ul>
    {
      posts.docs.map((post) =>(
        <li>
          <a href={`posts/${post.slug}`} set:html={post.title} />
        </li>
      ))
    }
  </ul>
</HomeLayout>

Usando la API de PayloadCMS para generar páginas

Crea una página src/pages/posts/[slug].astro para generar dinámicamente una página para cada publicación.

---
import PostLayout from "../../layouts/PostLayout.astro"

const {title, content} = Astro.props

// The getStaticPaths() is required for static Astro sites.
// If using SSR, you will not need this function.
export async function getStaticPaths() {
    let data = await fetch("http://localhost:5000/api/posts")
    let posts = await data.json()

    return posts.docs.map((post) => {
        return {
            params: {slug: post.slug},
            props: {title: post.title, content: post.content},
        };
    });
}
---
<PostLayout title={title}>
    <article>
        <h1 set:html={title} />
        <p set:html={content} />
    </article>
</PostLayout>

Publicando tu sitio

Para desplegar tu sitio, visita nuestra guía de despliegue y sigue las instrucciones para tu proveedor de alojamiento preferido.

Recursos de la comunidad

Echa un vistazo a la integración oficial de Astro con Payload CMS.
Prueba esta plantilla de Payload CMS y Astro.
Echa un vistazo a Astroad para un desarrollo fácil y un despliegue en VPS con Docker.

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