Si has escrito ya tres páginas, te habrás fijado: cada .astro empieza igual:
Repetir esto en cada página es un dolor (y una fuente de bugs: cuando cambias el <header>, tienes que tocar 20 archivos).
Astro no tiene una API especial para layouts. Un layout es un componente normal que define la envoltura HTML y deja un <slot /> en el medio para que las páginas inyecten su contenido.
Por convención los guardas en src/layouts/, pero técnicamente podrían vivir en cualquier sitio.
Importa el layout y envuelve el contenido específico de esa página:
Si abres el HTML resultante, el <header> y <footer> están ahí gratis. Cambias el layout una vez y se actualizan todas las páginas que lo usan.
Los layouts son componentes, así que también aceptan props. Lo más típico es pasarles el title de la página:
Y al usarlo:
(Lo profundizaremos en la lección de SEO.)
Nada te impide tener un layout que use otro layout. Por ejemplo: un BlogLayout que envuelve los posts y, a su vez, está envuelto por BaseLayout. Los slots se encadenan de forma natural.
Tienes dos archivos:
src/layouts/BaseLayout.astro (vacío)src/pages/index.astro (con contenido suelto, sin layout aún)En BaseLayout.astro:
<html>, <head>, <body>).<body>, añade un <header> con el nombre del sitio, un <slot /> y un <footer> con un copyright.En index.astro:
BaseLayout desde ../layouts/BaseLayout.astro.<h1> y el <p> con <BaseLayout>...</BaseLayout>.<html>, <head> y <body> que pudiera haber: ya los aporta el layout.Cuando lo tengas, mete unos minutos jugando: cambia el <header> y verás cómo se actualizan todas las páginas a la vez.