Layouts en AstroJS
Clase 5 de 14 • Curso de Desarrollo Web rápido con Astro
Contenido del curso
Creación de Páginas Web en Astro
Configuración de AstroJS
Enrutamiento
Próximos pasos
Resumen
<html lang="es"> <head> <title>Mi sitio</title> </head> <body> <h1>ladrillos.club</h1> <slot /> </body> </html>
Lograr consistencia visual en un proyecto web es fundamental, y en Astro los layouts son la herramienta clave para conseguirlo. Cuando creas páginas como "acerca" o "contacto" sin un layout, el navegador simplemente renderiza las etiquetas HTML sin ninguna estructura base compartida. Al incorporar un layout, defines un template reutilizable que envuelve el contenido específico de cada página mediante el componente <slot>, manteniendo elementos comunes como encabezados, estilos y metadatos.
¿Cómo se crea un layout base en Astro?
El primer paso es ir a la carpeta layouts del proyecto y crear un nuevo archivo llamado Base.astro, respetando la convención de primera letra en mayúscula [01:00]. Dentro de este archivo se construye la estructura fundamental de HTML utilizando el shortcut que ofrece Visual Studio Code para generar el esqueleto del documento.
La pieza central de cualquier layout en Astro es el slot. Este componente especial indica el lugar exacto donde se insertará el contenido de cada página que utilice el layout. Dentro del <body>, se coloca la etiqueta <slot /> y todo lo que rodee a esa etiqueta será compartido por las páginas que hereden esta estructura [01:30].
astro
<html lang="es"> <head> <title>Mi sitio</title> </head> <body> <h1>ladrillos.club</h1> <slot /> </body> </html>
En este ejemplo, el <h1> con "ladrillos.club" aparecerá en todas las páginas que usen Base.astro, mientras que el contenido particular de cada sección se renderizará donde está el <slot />.
¿Cómo se aplica el layout a una página existente?
Para utilizar el layout en una página como about.astro, es necesario crear un bloque de script en la parte superior del archivo, delimitado por tres guiones (---). Este bloque se ejecuta en tiempo de compilación y permite importar componentes [02:40].
astro
import Base from '../layouts/Base.astro';
<Base> <h2>Acerca</h2> <p>Lorem ipsum dolor sit amet...</p> </Base>El import funciona igual que en JavaScript o en frameworks como React. Se importa el componente Base y luego se encapsula todo el contenido de la página dentro de las etiquetas <Base> [03:10].
¿Por qué cambiar el H1 a H2 dentro de la página?
Aquí entra un concepto importante: la jerarquía de encabezados en HTML. Como el layout base ya contiene un <h1>, agregar otro <h1> dentro de la página generaría un problema de estructura semántica. Por eso, el encabezado de la página debe pasar a ser un <h2> [04:00]. Respetar esta jerarquía mejora tanto la accesibilidad como el posicionamiento en buscadores.
¿Qué sucede con los estilos globales al usar un layout diferente?
Al verificar el resultado en el navegador, el template funciona correctamente: aparece el encabezado compartido y el contenido específico. Sin embargo, los estilos globales no se aplican automáticamente [04:30]. Esto ocurre porque cada layout necesita importar explícitamente los archivos CSS que requiera.
Para solucionarlo, se agrega un import dentro del bloque de script del layout Base.astro:
astro
import '../styles/global.css';
Esta aproximación ofrece gran flexibilidad. Puedes tener múltiples archivos CSS divididos por layout, mostrando estructuras visuales distintas según la sección [05:10]. Por ejemplo, la página principal puede usar el layout por defecto con sus propios estilos, mientras que las secciones de contacto o acerca utilizan Base.astro con una configuración diferente.
¿Por qué los layouts son esenciales para escalar un proyecto en Astro?
Los layouts garantizan que cualquier elemento compartido, ya sea un header, un footer o archivos de estilos, se mantenga consistente en todas las páginas donde se apliquen. Si necesitas modificar el encabezado global, solo editas el layout y el cambio se refleja en cada sección que lo utilice.
Este patrón de reutilización también se extiende a los estilos: al vincular global.css desde el layout, cada página hereda automáticamente las reglas de diseño sin duplicar código [05:40]. La combinación de import para componentes y estilos, junto con el <slot /> para contenido dinámico, convierte a los layouts en la base arquitectónica de cualquier sitio construido con Astro.
Ahora que conoces esta mecánica, prueba a crear layouts diferenciados para cada sección de tu proyecto y comparte cómo organizas la estructura visual de tu sitio.