Diseñar un template atractivo para mostrar contenido dinámico marca la diferencia entre una página funcional y una experiencia editorial profesional. Aquí aprenderás a crear un layout en Astro reutilizable para rutas dinámicas, integrando Tailwind CSS, props del Content Collections API y componentes encapsulados que escalan con tu proyecto.

¿Cómo estructurar un layout para posts en Astro?

La carpeta layouts es el lugar donde viven las plantillas base que envuelven el contenido. Para este caso creamos un archivo post.astro que recibirá los datos de cada post y los renderizará con un diseño consistente.

El punto de partida fue un componente prediseñado de Hyper UI que incluye título, imagen y bloque de contenido. Lo importante no es el diseño en sí, sino cómo lo conectas con el sistema de props de Astro.

¿De dónde vienen las props en un layout de Astro?

En la sección de lógica JavaScript del componente, extraemos los datos desde Astro.props. La estructura queda así:

astro const { content } = Astro.props; const { title, toDate, image, tags } = content;

Estos valores provienen directamente de la API de Content Collections de Astro, que entrega el frontmatter parseado más el body del archivo Markdown. Con esa información ya puedes hacer render del título en un <h2>, la imagen con su atributo alt, la fecha con la etiqueta <time> y los tags iterando un arreglo.

¿Cómo renderizo el contenido del Markdown dentro del layout?

Usando <slot />. Ese marcador es donde Astro inyecta los elementos hijo, es decir, el cuerpo del archivo Markdown ya transformado a HTML.

¿Qué es un slot en Astro? Es el espacio reservado dentro de un componente o layout donde se inserta el contenido hijo. Cuando un archivo .md usa este layout, su body se renderiza exactamente donde colocas <slot />.

¿Cómo aplicar Tailwind para un diseño responsive en el layout?

La fecha y los tags viven en un <span> debajo del título. Para que la disposición cambie entre móvil y escritorio, combinamos clases utilitarias de Tailwind enfocadas en flexbox y breakpoints.

• flex flex-col apila los elementos en vertical por defecto.
• md:flex-row md:items-center los pone en fila y los centra en pantallas medianas.
• gap-y-* y md:divide-x controlan separación y divisores verticales.
• Un text-color define el contraste de la metadata.

La idea es que el bloque se vea limpio en móvil y se reorganice horizontalmente cuando hay espacio. Si quieres profundizar en estas clases, el curso oficial de Tailwind te da el atajo para maquetar más rápido.

¿Cómo reutilizo los tags como un componente independiente?

El bloque de tags ya existía en un componente cart previo. En lugar de duplicar código, conviene extraerlo a un componente propio que reciba el arreglo de tags como prop y devuelva la estructura renderizada.

Esta es la lógica de separación de responsabilidades: cada componente hace una sola cosa y se reutiliza en varias secciones. Te invito a crearlo tú mismo y compartirlo en los comentarios.

¿Cómo conectar el layout con los archivos del Content Collection?

Para que cada post use la nueva plantilla, hay que declarar la propiedad layout en el frontmatter de cada archivo Markdown dentro de tips:

yaml

layout: ../../layouts/post.astro

Este paso se repite en todos los archivos de la colección. Si tienes fechas idénticas entre posts, ajústalas con días distintos (por ejemplo 7, 8 y 9) para que el ordenamiento por toDate funcione correctamente.

¿Por qué mi layout en Astro no aplica los estilos globales? Porque el layout del post no está envolviendo a Base.astro. Debes importar tu layout base y encapsular el <slot /> dentro de él, pasándole un title.

¿Cómo encapsular el layout dentro del layout base?

El error común es que el template del post renderiza solo su contenido, pero pierde header, footer y estilos globales. La solución es importar Base.astro dentro de post.astro y envolver todo:

astro

<Base title="Astro Build.tips"> <!-- estructura del post con slot --> </Base>

En Base.astro basta con dejar h-screen para que tome toda la altura del viewport y eliminar la maquetación de ejemplo que se usaba para las rutas about o contact. Esas rutas pueden tener su propio template después, o simplemente no reutilizar este.

¿Cómo agregar imágenes dinámicas a cada post?

Para las imágenes de portada usamos una Fake API que devuelve imágenes según parámetros que tú defines. Es ideal para prototipado: pegas la URL en el campo image del frontmatter y cada post obtiene una imagen distinta sin gestionar archivos locales.

Este mismo recurso sirve para tiendas en línea o cualquier proyecto que necesite placeholders realistas. Lo encuentras en la sección de recursos junto con la documentación de la API.

Con el layout funcionando, la siguiente capa es agregar header, footer y botones para compartir en redes sociales. Y aquí viene lo interesante: Astro permite integrar React, Vue, Svelte o Preact en el mismo proyecto. ¿Cuál integrarías tú primero? Cuéntame en los comentarios.