Saltearse al contenido

Crea un componente de navegación reutilizable

Ahora que tienes el mismo HTML escrito en varias páginas de tu sitio de Astro, ¡es hora de sustituir ese contenido duplicado por un componente de Astro reutilizable!

Prepárate para...

  • Crear una nueva carpeta para los componentes
  • Crear un componente Astro para mostrar tus enlaces de navegación
  • Sustituir el HTML existente por un nuevo componente de navegación reutilizable

Crea una nueva carpeta src/components/.

Sección titulada Crea una nueva carpeta src/components/.

Para guardar los archivos .astro que generarán HTML pero que no se convertirán en nuevas páginas de tu sitio web, necesitarás una nueva carpeta en tu proyecto: src/components/.

Crea un componente de navegación

Sección titulada Crea un componente de navegación

  1. Crea un nuevo archivo: src/components/Navigation.astro.

  2. Copia tus enlaces para navegar entre páginas desde la parte superior de cualquier página y pégalos en tu nuevo archivo, Navigation.astro:

    src/components/Navigation.astro
    ---
    ---
    <a href="/">Inicio</a>
    <a href="/about/">Sobre mi</a>
    <a href="/blog/">Blog</a>

Importa y utiliza Navigation.astro

Sección titulada Importa y utiliza Navigation.astro

  1. Vuelve a index.astro e importa tu nuevo componente dentro del bloque de código:

    src/pages/index.astro
    ---
    import Navigation from '../components/Navigation.astro';
    ---

  2. A continuación, sustituye los elementos de enlace HTML de navegación existentes por el nuevo componente de navegación que acabas de importar:

    src/pages/index.astro
    <a href="/">Inicio</a>
    <a href="/about/">Sobre mi</a>
    <a href="/blog/">Blog</a>
    <Navigation />

  3. Comprueba la vista previa en tu navegador y observa que debería tener exactamente el mismo aspecto… ¡y es lo que quieres!

Tu sitio contiene el mismo HTML que antes. Pero ahora, esas tres líneas de código son proporcionadas por tu componente <Navigation />.

Pruébalo tu mismo - Añade navegación al resto de tu sitio web

Sección titulada Pruébalo tu mismo - Añade navegación al resto de tu sitio web

Importa y utiliza el componente <Navigation /> en las otras dos páginas de tu sitio (about.astro y blog.astro) utilizando el mismo método.

No olvides

  • Añadir una sentencia import en la parte superior del script del componente, dentro de la valla de código.
  • Sustituir el código existente por el componente de navegación.

Pon a prueba tus conocimientos

Sección titulada Pon a prueba tus conocimientos

  1. Puedes hacerlo cuando tengas elementos repetidos en varias páginas:

  2. Los componentes Astro son:

  3. Los componentes Astro crearán automáticamente una nueva página en tu sitio cuando…

Checklist

Sección titulada Checklist

Recursos

Sección titulada Recursos