CursosEmpresasBlogLiveConfPrecios

Contenido del curso

Layouts en Astro para páginas consistentes

Resumen

Crear un layout en Astro te permite definir una estructura base reutilizable que envuelve tus páginas y mantiene la consistencia visual en todo el proyecto. Esta guía es para ti si estás aprendiendo a construir sitios con Astro y necesitas entender cómo encapsular páginas como About o Contact dentro de una plantilla común.

¿Qué es un layout en Astro y por qué usarlo?

Un layout funciona como una plantilla o estructura base donde insertas contenido dinámico mediante un slot. Sin layout, páginas como About o Contact solo renderizan el HTML que les escribes directamente, sin compartir cabecera, estilos o estructura común con el resto del sitio.

La idea es simple: defines una vez la estructura HTML base con su <head>, su título, su header y un punto de inserción, y luego cada página que use ese layout heredará todo eso automáticamente.

¿Qué hace el slot en un layout de Astro? El <slot /> es el espacio reservado donde se renderiza el contenido específico de cada página que usa el layout. Todo lo que envuelvas dentro del componente layout aparecerá en ese slot.

¿Cómo creo un archivo base.astro paso a paso?

Dentro de la carpeta layouts crea un nuevo archivo siguiendo la convención de nombres con la primera letra en mayúscula: Base.astro. Este será tu punto de partida para envolver otras páginas.

Los pasos clave son:

  • Generar la estructura HTML básica usando el atajo de Visual Studio Code que crea el esqueleto completo.
  • Definir el <title> del documento, que más adelante puedes volver dinámico.
  • Insertar el <slot /> dentro del <body> para que ahí se rendericen los componentes hijos.
  • Agregar elementos persistentes como un <h1> con el nombre del sitio, en este caso Ladrillos.club, que aparecerá en todas las páginas que usen este layout.

Con esa estructura guardada ya tienes una plantilla funcional lista para envolver tus páginas.

¿Cómo importo un layout en una página de Astro?

Ve a la página donde quieras aplicarlo, por ejemplo About, y selecciona el <h1> y todo el contenido relevante. En la parte superior del archivo abre un bloque de script con --- (el code fence de Astro) para que el compilador lo lea antes de renderizar.

Dentro de ese bloque importas el layout igual que importarías un componente en React:

astro

import Base from '../layouts/Base.astro';

<Base> <h2>About</h2> <p>Lorem ipsum...</p> </Base>

Fíjate en un detalle de jerarquía HTML: si el layout ya tiene un <h1> con Ladrillos.club, el título de la página About debe bajar a <h2>. Tener dos <h1> en la misma página rompe la semántica y afecta el SEO.

¿Por qué mi layout no aplica los estilos globales?

Al abrir el navegador y revisar la página About vas a notar que la plantilla funciona, el header Ladrillos.club aparece arriba y el contenido se renderiza dentro, pero los estilos globales no se están aplicando. Esto pasa porque el archivo global.css no se está importando dentro del layout.

La solución es agregar la importación del CSS dentro del bloque de script del propio Base.astro:

astro

import '../styles/global.css';

Con eso, cualquier página que use este layout heredará automáticamente los estilos definidos para etiquetas como <h1>, <h2> o párrafos.

¿Puedo tener varios layouts distintos en un proyecto? Sí. Puedes usar un layout por defecto en la home y layouts diferentes para Contact, About u otras secciones, cada uno con sus propios estilos y estructura.

¿Cómo aplico el mismo layout a otras páginas como Contact?

El proceso se repite igual: abres Contact.astro, encapsulas su contenido dentro del componente <Base>, importas el layout en el bloque de script y guardas. La consistencia visual queda garantizada en todas las secciones que compartan esa plantilla.

Esta arquitectura te da flexibilidad para escalar:

  • Puedes crear múltiples archivos CSS específicos por layout.
  • Puedes definir layouts distintos según el tipo de página, como tienda online, blog o landing.
  • Puedes mantener elementos comunes como header, footer o navegación en un solo lugar.

El beneficio real aparece cuando tu proyecto crece: cambiar el header del sitio significa editar un archivo, no veinte.

Conceptos y habilidades clave de la clase

Algunos puntos técnicos que vale la pena tener claros mientras practicas:

  • Layout: archivo .astro que define una estructura base reutilizable [0:15].
  • Slot: etiqueta <slot /> que marca dónde se inyecta el contenido hijo dentro del layout [1:25].
  • Convención de nombres: los layouts se nombran con la primera letra en mayúscula, como Base.astro [0:50].
  • Bloque de script de Astro: las tres rayas --- al inicio del archivo permiten ejecutar imports y lógica antes del render [3:00].
  • Jerarquía HTML: un solo <h1> por página; el resto debe ser <h2>, <h3>, etc. [4:10].
  • Importación de estilos globales: import '../styles/global.css' dentro del layout aplica los estilos a todas las páginas que lo usen [5:30].

¿Qué páginas vas a construir tú con esta base? Cuéntame en los comentarios qué sección vas a encapsular primero en tu proyecto.