Construye tu primer layout

Prepárate para…

Refactoriza elementos comunes en un layout de página
Usa un elemento <slot /> de Astro para colocar contenidos de página dentro de un layout
Pasa valores específicos de página como props a su layout

Aún tienes algunos componentes de Astro repetidamente renderizados en cada página. ¡Es hora de refactorizar de nuevo para crear un layout de página compartido!

Crea tu primer componente de layout

Crea un nuevo archivo en la ubicación src/layouts/BaseLayout.astro. (Necesitarás crear una nueva carpeta layouts primero.)

Copia el contenido completo de index.astro en tu nuevo archivo, BaseLayout.astro.

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Home Page";
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Header />
    <h1>{pageTitle}</h1>
    <Footer />
    <script>
      import "../scripts/menu.js";
    </script>
  </body>
</html>

Usa tu layout en una página

Reemplaza el código en src/pages/index.astro con lo siguiente:

---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Home Page";
---
<BaseLayout>
  <h2>My awesome blog subtitle</h2>
</BaseLayout>

Revisa la vista previa del navegador de nuevo para notar qué cambió (o, spoiler: ¡no cambió!).

Añade un elemento <slot /> a src/layouts/BaseLayout.astro justo encima del componente footer, luego revisa la vista previa del navegador de tu página Home y nota qué sí cambió esta vez.

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Home Page";
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Header />
    <h1>{pageTitle}</h1>
    <slot />
    <Footer />
    <script>
      import "../scripts/menu.js";
    </script>
  </body>
</html>

El <slot /> te permite inyectar (o "slot in") contenido hijo escrito entre las etiquetas de apertura y cierre <Component></Component> a cualquier archivo Component.astro.

Pasa valores específicos de página como props

Pasa el título de la página a tu componente de layout desde index.astro usando un atributo de componente:

---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Home Page";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>My awesome blog subtitle</h2>
</BaseLayout>

Cambia el script de tu componente de layout BaseLayout.astro para recibir un título de página vía Astro.props en lugar de definirlo como una constante.

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Home Page";
const { pageTitle } = Astro.props;
---

Revisa la vista previa de tu navegador para verificar que el título de tu página no ha cambiado. Tiene el mismo valor, pero ahora está siendo renderizado dinámicamente. Y ahora, cada página individual puede especificar su propio título al layout.

Pruébalo tú mismo - Usa tu layout en todas partes

Refactoriza tus otras páginas (blog.astro y about.astro) para que usen tu nuevo componente <BaseLayout> para renderizar los elementos comunes de la página.

No olvides:

Pasar un título de página como props vía un atributo de componente.
Dejar que el layout sea responsable de la renderización HTML de cualquier elemento común.
Mueve cualquier etiqueta <style> existente en el <head> de la página con estilos que quieras conservar a la plantilla HTML de la página.
Elimina cualquier cosa de cada página individual que ahora está siendo manejada por el layout, incluyendo:
- Elementos HTML
- Componentes y sus imports
- Reglas CSS en una etiqueta <style> (ej. <h1> en tu página About)
- Etiquetas <script>

Checklist

Puedo crear un componente de layout de Astro con un <slot />.
Puedo enviar propiedades específicas de página a un layout.

Recursos

Contribuir Comunidad Patrocinar