Layouts, componentes y slots

Aprende a construir una estructura reutilizable con layouts y a componer páginas limpias con componentes y slots.

Cuando una web crece, repetir header, footer, metadatos y estructura en cada página es una mala idea. Ahí entran layouts y componentes.

Layout base

Un layout es una plantilla general:

---
const { title = 'Mi sitio' } = Astro.props;
---

<html lang="es">
  <head>
    <title>{title}</title>
  </head>
  <body>
    <header>Header</header>
    <main>
      <slot />
    </main>
    <footer>Footer</footer>
  </body>
</html>

Usarlo desde una página

---
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout title="Inicio">
  <h1>Bienvenido</h1>
  <p>Contenido de la home.</p>
</BaseLayout>

El layout resuelve la estructura; la página solo aporta contenido.

Componentes

Los componentes .astro sirven para encapsular trozos reutilizables:

  • cards
  • headers
  • listados
  • banners
  • CTAs
---
const { title, description } = Astro.props;
---

<article>
  <h3>{title}</h3>
  <p>{description}</p>
</article>

Slots

Los slots permiten inyectar contenido hijo:

<Card>
  <strong>Contenido dentro del slot</strong>
</Card>

Y también slots con nombre:

<Layout>
  <div slot="footer">Pie extra</div>
</Layout>

El patrón que más vas a repetir

En sitios con contenido funciona muy bien esta jerarquía:

  1. layout general
  2. layout específico de sección si hace falta
  3. componentes pequeños reutilizables
  4. página final ensamblando todo

Eso te sirve tanto para un blog como para una tienda simple o una documentación.

Una estructura sensata para empezar

Si montaras una web con home, listado y detalle:

  • BaseLayout.astro
  • PostCard.astro
  • CategoryList.astro
  • src/pages/index.astro
  • src/pages/blog/index.astro
  • src/pages/blog/[slug].astro

Esa ya es una base muy razonable.

En la siguiente lección entramos en estilos, assets e imágenes, que en Astro tienen bastante importancia.