Layouts y Props

Usando los layouts o “plantillas de página” ¶

👀 Alerta, código duplicado

Si te has dado cuenta index.astro y about.astro son casi iguales. Una de las malas prácticas en programación es duplicar código.

🌎 Dicen los que saben que “El mejor código es el que no se escribe”.

Como queremos hacer las cosas bien desde el principio nos vamos a meter en otro de los brillantes conceptos de Astro: los layouts.

🔍 Un layout (o “plantilla de página”) es como una plantilla contenedor que nos permite meter dentro páginas de Astro.

Crea la carpeta src/layouts.

Crea dentro el fichero SiteLayout.astro.

Copia y pega este código allí:

src/layouts/SiteLayout.astro

---
---
<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} />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />
    <title>Soy Astro</title>
  </head>
  <body>
    <slot />
  </body>
</html>

👀 Fíjate que hemos extraído las partes comunes de nuestras dos páginas a este nuevo layout y hemos incorporado la etiqueta <slot /> propia de Astro. Ahí aparecerá luego nuestro contenido.

Avanzamos un poco más.

Modifica src/pages/index.astro y déjalo así:

src/pages/index.astro

---
import SiteLayout from "../layouts/SiteLayout.astro";
---
<SiteLayout>
	<div class="container col-xxl-8 px-4 py-5">
		<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
			<div class="col-10 col-sm-8 col-lg-6">
				<img
					src="https://placekitten.com/g/500/400"
					class="d-block mx-lg-auto img-fluid"
					alt="Flamante Astro web"
					width="700"
					height="500"
					loading="lazy"
				/>
			</div>
			<div class="col-lg-6">
				<h1 class="display-5 fw-bold lh-1 mb-3">Mi primera Astro web</h1>
				<p class="lead">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
					eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
					minim veniam, quis nostrud exercitation ullamco laboris nisi ut
					aliquip ex ea commodo consequat.
				</p>
				<div class="d-grid gap-2 d-md-flex justify-content-md-start">
					<a href="/about" class="btn btn-primary btn-lg px-4 me-md-2">Leer más</a>
				</div>
			</div>
		</div>
	</div>
</SiteLayout>

Aquí han pasado dos cosas importantes

Hemos utilizado la parte del “script” (la parte que hay entre las líneas --- para importar el layout que has creado. ¡Eso es JavaScript!
Cambiamos el código repetido para incluirlo dentro de las etiquetas <SiteLayout>. ¡Eso es HTML!

¿Te acuerdas de lo que te dije antes de los layouts?

Un layout es un “contenedor”, una plantilla donde “metemos dentro” páginas.

💪 ¡Pues acabas de conseguirlo!

💦 Repite el mismo proceso para la página de about.astro

🔍 ¿Ves lo que está pasando?

Nuestra etiqueta <title> se repite tanto en la home como en /about.

Podemos resolverlo muy fácil, ya verás:

Props ¶

🔍 Las props son propiedades que podemos pasar de un sitio a otro en los componentes de Astro. Realmente SiteLayout.astro es un “componente”, aunque con algunas características especiales.

Cada componente de Astro tiene dos partes bien diferenciadas como ya has visto antes:

---
// Script del componente (JavaScript)
---
<!-- HTML del componente -->

Ahora queremos que cada page pueda indicarle al layout un title diferente.

Para eso usaremos el objeto Astro , disponible en todos los componentes del proyecto.

src/layouts/SiteLayout.astro

---
const {title} = Astro.props 
---
<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} />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />
    <title>{title}</title>
  </head>
  <body>
    <slot />
  </body>
</html>

Astro.props va a ser capaz de leer el atributo title cuando se lo pase una página.

Aplica los cambios a los siguientes ficheros:

src/pages/about.astro

<SiteLayout title="Sobre mi">

Repite en index.astro

src/pages/index.astro

<SiteLayout title="Soy Astro">

💪 ¡Visita las páginas y lo tienes hecho!

⚡️ Pon a prueba lo que has aprendido

1. ¿Qué es un layout en Astro?

2. ¿Cómo se pueden pasar propiedades de un componente a otro en Astro?

3. ¿Cuál es el propósito de la etiqueta <slot /> en un layout de Astro?