Layouts: src/layouts/

Un Layout es una plantilla que define el esqueleto HTML global que comparten múltiples páginas de tu sitio web. Generalmente incluye la etiqueta <!DOCTYPE html>, la cabecera <head>, el navegador principal <header> y el pie de página <footer> ya sea escrita dentro del mismo o creada con componentes.

Características clave de un Layout

• SIEMPRE utiliza la etiqueta <slot />: En los layouts, siempre se debe dejar una "ranura" reservada en el medio para inyectar el contenido específico de cada página. En el caso de los Layouts la etiqueta <slot /> es obligatoria (para inyectar toda la página dentro), a diferencia de los componentes cuyo uso es opcional (para inyectar contenido pequeño) y depende de su naturaleza.
• Gestiona la metadata y el SEO: Recibe mediante Props datos como el <title> de la pestaña del navegador o la description para buscadores.
• Mantiene la consistencia visual: Si se cambia algo en el layout base (por ejemplo, el menú de navegación), se actualiza automáticamente en toda la web.

Reglas de ubicación y nombrado

• Carpeta: Los layouts de Astro se ubican dentro de la carpeta src/layouts/.
• Extensión Utilizan la extensión .astro Son archivos nativos de Astro, a diferencia de los componentes, que pueden ser interactivos (React/Svelte/Vue) para aquellas piezas de la interfaz que necesiten interactividad (islas).
• Nomenclatura (UpperCamelCase): Por convención estándar, los nombres de archivos deben empezar con mayúscula y usar PascalCase / UpperCamelCase (ejemplos: BaseLayout.astro, BlogPostLayout.astro, DefaultLayout.astro).

Ejemplo de Layout

src/layouts/DefaultLayout.astro

¿Cómo envuelve el contenido de la página?

src/pages/index.astro

src/layouts/ vs src/components/

Aunque técnicamente los archivos .astro de ambas carpetas son componentes de Astro y comparten el mismo lenguaje, cumplen propósitos de diseño y arquitectura completamente opuestos.

La diferencia fundamental

• Los componentes (src/components/) son piezas de contenido ("ladrillos"). Van dentro de la página o de otros componentes.
• Los layouts (src/layouts/): Son estructuras envolventes (el "marco de la casa"). Van alrededor de la página completa o del contenido principal.

    ┌────────────────────────────────────────────────────────┐
    │  LAYOUT BASE (BaseLayout.astro)                        │
    │  ├── <head> (Metadatos, SEO, Favicon, CSS Global)      │
    │  ├── <Header />  ────────────┐                         │
    │  │                           │                         │
    │  │   PÁGINA (index.astro)    │ Componentes de UI       │
    │  │   ├── <HeroSection />     │ (src/components/)       │
    │  │   ├── <PostCard />        │                         │
    │  │   └── <Footer />  ────────┘                         │
    │  │                                                     │
    │  └── </body>                                           │
    └────────────────────────────────────────────────────────┘