Saltearse al contenido

Construye tu primer plantilla

Prepárate para...

  • Refactorizar elementos comunes en un diseño de página
  • Utilizar el elemento <slot /> de Astro para colocar el contenido de la página dentro de una plantilla
  • Pasar valores específicos de la página como props a tu plantilla

Todavía tienes algunos componentes de Astro repetidamente renderizados en cada página. ¡Es hora de refactorizar para crear una plantilla de página compartido!

Crea tu primer componente plantilla

Sección titulada Crea tu primer componente plantilla

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

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

    src/layouts/BaseLayout.astro
    ---
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "Página de inicio";
    ---
    <html lang="es">
      <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>

Utiliza tu plantilla en una página

Sección titulada Utiliza tu plantilla en una página

  1. Sustituye el código en src/pages/index.astro por el siguiente:

    src/pages/index.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    const pageTitle = "Página de inicio";
    ---
    <BaseLayout>
      <h2>Mi impresionante subtítulo del blog</h2>
    </BaseLayout>

  2. Comprueba de nuevo la vista previa del navegador para ver qué ha cambiado (o, alerta de spoiler: ¡no ha cambiado!).

  3. Añade un elemento <slot /> a src/layouts/BaseLayout.astro justo encima del componente de pie de página y, a continuación, comprueba la vista previa del navegador de tu página de inicio y observa lo que realmente ha cambiado esta vez.

    src/layouts/BaseLayout.astro
    ---
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "Página de inicio";
    ---
    <html lang="es">
      <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>

La etiqueta <slot /> permite inyectar (o “introducir”) contenido hijo escrito entre las etiquetas de apertura y cierre <Component></Component> en cualquier archivo Component.astro.

Pasa valores específicos de la página como props

Sección titulada Pasa valores específicos de la página como props

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

    src/pages/index.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    const pageTitle = "Página de inicio";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <h2>Mi impresionante subtítulo del blog</h2>
    </BaseLayout>

  2. Cambia el script de tu componente plantilla BaseLayout.astro para recibir un título de página a través de Astro.props en lugar de definirlo como una constante.

    src/layouts/BaseLayout.astro
    ---
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "Página de inicio";
    const { pageTitle } = Astro.props;
    ---

  3. Comprueba 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 se muestra dinámicamente. Y ahora, en cada página individual puedes especificar tu propio título en la plantilla.

Pruébalo tu mismo - Utiliza tu plantilla en todas partes

Sección titulada Pruébalo tu mismo - Utiliza tu plantilla en todas partes

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

No lo olvides:

  • Pasar un título de página como props a través de un atributo de componente.

  • Deja que la plantilla se encargue de la representación HTML de los elementos comunes.

  • Eliminar cualquier cosa de cada página que esa página ya no es responsable de la representación, ya que está siendo manejado por la plantilla, incluyendo:

    • Elementos HTML
    • Componentes y tus importaciones
    • Reglas CSS en una etiqueta <style> (por ejemplo, <h1> en tu página ‘Acerca de’).
    • Etiquetas <script>.

Pon a prueba tus conocimientos

Sección titulada Pon a prueba tus conocimientos

  1. Un componente de Astro (archivo .astro) puede funcionar como una:

  2. Para mostrar un título de página en la página, puedes:

  3. La información puede pasar de un componente a otro mediante:

Checklist

Sección titulada Checklist

Recursos

Sección titulada Recursos