🧱 1. ¿Qué es un layout?

Un layout (diseño base o plantilla) es como un esqueleto que define la estructura general de tus páginas: cabecera, menú, zona de contenido y pie.

💡 Imagina que todas tus páginas comparten el mismo encabezado y pie de página. En lugar de copiar y pegar ese HTML en todas, creas un solo layout y lo reutilizas.

🏗️ 2. Crear un layout base

Crea un archivo llamado:

src/layouts/BaseLayout.astro

y escribe esto:

1---
2const { title } = Astro.props;
3---
4
5<html lang="es">
6  <head>
7    <meta charset="UTF-8" />
8    <title>{title}</title>
9  </head>
10  <body>
11    <header>
12      <h1>🌟 Mi sitio en Astro</h1>
13      <nav>
14        <a href="/">Inicio</a>
15        <a href="/about">Sobre mí</a>
16        <a href="/contact">Contacto</a>
17      </nav>
18    </header>
19
20    <main>
21      <slot />  <!-- Aquí se inyectará el contenido de cada página -->
22    </main>
23
24    <footer>
25      <p>© 2025 Mi Web con Astro</p>
26    </footer>
27  </body>
28</html>
29
30<style>
31  body {
32    font-family: sans-serif;
33    margin: 0;
34    padding: 0;
35  }
36  header, footer {
37    background: #4f46e5;
38    color: white;
39    text-align: center;
40    padding: 1rem;
41  }
42  nav a {
43    color: white;
44    margin: 0 10px;
45    text-decoration: none;
46  }
47  main {
48    padding: 2rem;
49  }
50</style>

📄 3. Usar el layout en una página

Crea src/pages/index.astro:

1---
2import BaseLayout from '../layouts/BaseLayout.astro';
3---
4
5<BaseLayout title="Inicio">
6  <h2>Bienvenido a mi sitio</h2>
7  <p>Hecho con 💜 y Astro</p>
8</BaseLayout>

Resultado: Tu página mostrará el encabezado, menú y pie, con el contenido dentro del <main> gracias al <slot />.

🧠 Recuerda: El <slot /> es un espacio reservado donde se “inyecta” el contenido de cada página.

🪄 4. ¿Qué son los componentes?

Un componente es un bloque de código reutilizable, por ejemplo:

Un botón.
Una tarjeta de producto.
Un encabezado o pie de página.

Los componentes viven en:

src/components/

y puedes combinarlos en cualquier página o layout.

💡 5. Crear tu primer componente

Crea:

src/components/Button.astro

1---
2const { label, href } = Astro.props;
3---
4
5<a href={href} class="btn">{label}</a>
6
7<style>
8  .btn {
9    background-color: #4f46e5;
10    color: white;
11    padding: 10px 20px;
12    border-radius: 8px;
13    text-decoration: none;
14  }
15  .btn:hover {
16    background-color: #4338ca;
17  }
18</style>

👉 Este componente recibe dos props: label y href.

🔗 6. Usar un componente en una página

Modifica index.astro:

1---
2import BaseLayout from '../layouts/BaseLayout.astro';
3import Button from '../components/Button.astro';
4---
5
6<BaseLayout title="Inicio">
7  <h2>Bienvenido a mi sitio</h2>
8  <p>Hecho con 💜 y Astro</p>
9
10  <Button label="Ver más" href="/about" />
11</BaseLayout>

Resultado: Un botón estilizado reutilizable. Puedes usarlo en todas las páginas sin copiar CSS ni HTML.

🧰 7. Componentes con contenido interno (`<slot />`)

A veces no necesitas props, sino que quieres pasar contenido directamente dentro del componente.

Crea:

src/components/Card.astro

1<div class="card">
2  <slot />
3</div>
4
5<style>
6  .card {
7    background: white;
8    padding: 1.5rem;
9    border-radius: 8px;
10    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
11  }
12</style>

Usa el componente en tu página:

1---
2import BaseLayout from '../layouts/BaseLayout.astro';
3import Card from '../components/Card.astro';
4---
5
6<BaseLayout title="Tarjetas">
7  <Card>
8    <h3>Aprendiendo Astro</h3>
9    <p>Astro es rápido, simple y moderno.</p>
10  </Card>
11
12  <Card>
13    <h3>Reutiliza componentes</h3>
14    <p>Menos código repetido, más eficiencia.</p>
15  </Card>
16</BaseLayout>

🎯 Así puedes tener componentes limpios, modulares y personalizables.

🧩 8. Recomendaciones

✅ Guarda layouts en /src/layouts y componentes en /src/components.
✅ Usa props para pasar datos, o slots para pasar contenido.
✅ Evita repetir HTML común (usa layouts).
✅ Divide tu interfaz en pequeños componentes reutilizables.

Curso de Astro