MallaDocs
InicioInicio rápidoAbrir Malla

Crea un blog

Modela publicaciones en el CMS, muéstralas en una página y dale a cada una su propia página plantilla lista para SEO.

Guía de usuario
Principiante25 min

Vas a construir: Un blog con una colección Posts, una lista de publicaciones en una página y una página lista para SEO por publicación, en línea en staging

Lee primero: Recorrido por el editorConstruye una landing page

En este tutorial modelas las publicaciones de un blog en el CMS, escribes y publicas algunas, las muestras en una página y diseñas una página plantilla que renderiza cada publicación en su propia dirección. Necesitas un sitio que puedas editar, por ejemplo el del tutorial de la landing page.

Crea un blogEl video llegará pronto. Los pasos escritos a continuación cubren todo.
Crea un blog· 10 min

Crea la colección Posts

  1. Abre el CMS

    En la barra lateral izquierda, debajo de las pestañas, presiona CMS. El espacio de trabajo del CMS reemplaza al lienzo. Presiona CMS otra vez, o la x junto a él, para volver al lienzo.

  2. Crea la colección

    Presiona New collection. Escribe Posts como Name; el Slug se completa como posts. Presiona Create collection. Toda colección empieza con dos campos, Title y Slug.

  3. Agrega los campos

    Abre la pestaña Fields y presiona Add field para cada campo de la lista. Selecciona un campo en la lista para cambiar su Name en el panel de ajustes de la derecha; la Key sigue al nombre hasta que guardas.

    • Image, llamado Cover.
    • Text, llamado Excerpt. Activa Multiple lines.
    • Rich text, llamado Body. Activa Required to publish.
    • Date, llamado Date.

  4. Guarda el esquema

    Presiona Save schema en la barra inferior. Las keys quedan fijas una vez guardadas, porque los enlaces de datos las usan.

Punto de control

La pestaña Fields de Posts muestra Title, Slug, Cover, Excerpt, Body y Date.

Escribe tus primeras publicaciones

  1. Agrega un ítem

    Abre la pestaña Items y presiona New item. El ítem se abre en un panel lateral. Escribe un título: el slug lo sigue hasta que editas el slug o guardas.

  2. Completa los campos

    Presiona Choose an image debajo de Cover y sube o elige una imagen; luego escribe su texto alternativo. Escribe un extracto corto, elige una fecha y escribe el cuerpo. El editor del cuerpo tiene títulos, listas, enlaces e imágenes.

  3. Guarda un borrador

    Presiona Save draft, o ⌘S. Un borrador todavía no está en el sitio.

  4. Publica el ítem

    Presiona Publish, o ⌘↵. El estado cambia a Published. Las ediciones posteriores conservan la copia en línea hasta que presionas Publish changes.

  5. Agrega dos publicaciones más

    Crea dos ítems más de la misma forma para que la lista tenga algo que mostrar. Publica uno ahora. Para el otro, abre el menú More actions (...) en la parte inferior del panel, elige Schedule…, elige una hora y presiona Schedule.

Punto de control

La tabla de ítems muestra tres publicaciones: dos Published y una Scheduled.

Muestra las publicaciones en una página

  1. Inserta una lista de colección

    Vuelve al lienzo y abre la página que debe mostrar las publicaciones. Selecciona el frame de la página, presiona + en la pestaña Layers y elige Collection list en el grupo CMS. Usa tu primera colección y contiene un frame llamado Item.

  2. Configura la consulta

    En la sección Collection list del inspector, deja Source en CMS query y Collection en Posts. Pon Sort en Date y elige la flecha descendente para que la publicación más reciente aparezca primero. Limit es 6 por defecto.

  3. Diseña la tarjeta

    El primer hijo de la lista es la plantilla: diséñalo una vez y se repite para cada publicación. Selecciona Item y usa + para agregar una Image y dos elementos Text dentro.

  4. Enlaza la tarjeta con la publicación

    Selecciona la imagen. En la sección Image, presiona el botón de la fila CMS image y elige Cover en CMS fields. Selecciona el primer texto y, en Typography, presiona en la fila Content y elige Title. Enlaza el segundo texto a Excerpt de la misma forma.

Punto de control

La lista muestra una tarjeta por cada publicación publicada, cada una con su propia portada, título y extracto.

Diseña la página de la publicación

  1. Crea una página plantilla

    Abre la pestaña Pages, presiona el botón de base de datos, New collection page, y elige Posts. Malla agrega una página con la ruta /posts/:slug. Se renderiza una vez por cada publicación publicada.

  2. Elige un ítem de vista previa

    Presiona Esc para quitar la selección. El inspector muestra la sección Page: comprueba que Collection sea Posts y elige una publicación en Preview. Ahora el lienzo muestra esa publicación.

  3. Agrega el contenido de la publicación

    Agrega un Text para el título y enlaza su Content a Title. Agrega una Image y enlaza CMS image a Cover. Para el cuerpo, presiona + y elige Rich text en el grupo CMS; luego, en la sección Content, presiona en la fila Source y elige Body.

  4. Muestra la fecha

    Agrega un Text para la fecha. Presiona en su fila Content, escribe esta expresión en lugar de elegir un campo y presiona ↵:

    text
    fn.formatDate(item.date, 'long')
Punto de control

La página plantilla muestra la publicación de vista previa con su título, fecha, portada y cuerpo con formato. Elige otra publicación en Preview y el lienzo la sigue.

  1. Envuelve el contenido de la tarjeta en un enlace

    Vuelve a la página con la lista. En la pestaña Layers, selecciona la imagen y los dos textos dentro de Item (⇧ + clic), haz clic derecho en uno de ellos y elige Wrap in link. Item en sí no se puede envolver, así que envuelve lo que tiene dentro. También puedes insertar un Link block en Item y arrastrar el contenido dentro.

  2. Enlaza la URL con la página de la publicación

    Con el nuevo enlace seleccionado, abre la sección Link. Presiona en la fila Bound URL y elige tu página de publicación en Item page. Ahora el enlace apunta a /posts/ seguido del slug de cada publicación.

  3. Pruébalo en la vista previa

    Presiona ⌘↵ y haz clic en una tarjeta. La vista previa abre la página de la publicación con esa publicación. Presiona ⌘↵ otra vez para volver a editar.

Punto de control

En la vista previa, cada tarjeta abre su propia publicación.

Agrega SEO y publica

  1. Enlaza el título SEO

    Vuelve a abrir la página de la publicación en la pestaña Pages. Sin nada seleccionado, abre la sección SEO. Presiona junto a Title, escribe item.title + ' | Blog' y presiona ↵. Ahora cada página de publicación tiene su propio título.

  2. Enlaza la descripción SEO

    Presiona junto a Description y elige Excerpt. Los buscadores y las vistas previas en redes sociales ahora muestran el extracto de cada publicación.

  3. Publica en staging

    Presiona Publish en la barra de herramientas, deja Staging seleccionado y presiona Publish to staging. Abre el enlace, ve a la página con la lista y haz clic en una tarjeta para abrir su publicación.

Listo

Tu blog está en línea en staging: la página de lista muestra tus publicaciones publicadas, y cada publicación tiene su propia página y título. La publicación programada aparece sola cuando llega su hora.

Lo que aprendiste

  • Una colección define los campos de tu contenido, y los ítems son las entradas que escribes, guardas como borrador, publicas o programas.
  • Una lista de colección repite su primer hijo una vez por ítem, y enlaza una capa con un campo del ítem.
  • Una página plantilla renderiza una página por cada ítem publicado, con los campos SEO enlazados al ítem.
  • Un enlace con la URL enlazada a Item page lleva cada tarjeta de una lista a la página de su propio ítem.

Sigue con los próximos tutoriales o lee las guías en las que se basa este:

CMSColecciones, campos, ítems, texto enriquecido, borradores, programación, versiones y páginas plantilla dinámicas.Listas de colecciónRepite una plantilla una vez por cada ítem de una consulta o un array, con estado vacío y paginación.Enlaces de datos y expresionesEnlaza cualquier texto, atributo, estilo o visibilidad a una expresión que lee datos en vivo.SEO y ajustes del sitioTítulos de página, descripciones, imágenes para redes sociales, sitemaps, robots y noindex.