Ir 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/`.

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

Crea un nuevo archivo: src/components/Navigation.astro.
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>
```
Si no hay nada en el frontmatter de tu archivo .astro, no es necesario que escribas los bloques de código. Siempre puedes volver a agregarlos cuando los necesites.

Importa y utiliza Navigation.astro

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

---
import Navigation from '../components/Navigation.astro';
import "../styles/global.css";

const pageTitle = "Home Page";
---

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 />
```
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

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

Puedes hacerlo cuando tengas elementos repetidos en varias páginas:
1. reiniciar el servidor dev
2. refactorizar para utilizar un componente reutilizable
3. crear una nueva página
Los componentes Astro son:
1. reutilizables
2. fragmentos de HTML
3. ambas cosas.
Los componentes Astro crearán automáticamente una nueva página en tu sitio cuando…
1. incluyes <html></html>
2. refactorizas
3. pones el fichero .astro dentro de src/pages/

Checklist

Puedo refactorizar contenidos en componentes reutilizables.
Puedo añadir un nuevo componente a una página .astro.

Recursos

Visión general de los componentes Astro
Refactorización externo

Contribuir Comunidad Patrocinador