Saltar al contenido

Crea un componente de Navegación reutilizable

Ahora que tienes el mismo HTML escrito en múltiples páginas de tu sitio de Astro, ¡es hora de reemplazar ese contenido duplicado con un componente de Astro reutilizable!

Prepárate para…

Crea una nueva carpeta para componentes
Construye un componente de Astro para mostrar tus enlaces de navegación
Reemplaza el HTML existente con un nuevo componente de navegación reutilizable

Crea una nueva carpeta `src/components/`

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

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="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
```
Si no hay nada en el frontmatter de tu archivo .astro, no tienes que escribir las vallas de código. Siempre puedes añadirlas de nuevo cuando las necesites.

Importa y usa Navigation.astro

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

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

const pageTitle = "Home Page";
---

Luego abajo, reemplaza los elementos HTML existentes de enlaces de navegación con el nuevo componente de navegación que acabas de importar:
src/pages/index.astro
```
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<Navigation />
```
Revisa la vista previa en tu navegador y nota que debería verse exactamente igual… ¡y eso 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 />.

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

No olvides

Añadir una declaración de import en la parte superior del script del componente, dentro de la valla de código.
Reemplaza el código existente con el componente de navegación.

Pon a prueba tu conocimiento

Puedes hacer esto cuando tienes elementos repetidos en múltiples páginas:
1. reiniciar el dev server
2. refactorizar para usar un componente reutilizable
3. crear una nueva página
Los componentes de Astro son:
1. reutilizables
2. fragmentos de HTML
3. ¡ambos!
Los componentes de Astro crearán automáticamente una nueva página en tu sitio cuando…
1. incluir <html></html>
2. refactorices
3. poner el archivo .astro dentro de src/pages/

Checklist

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

Recursos

Visión general de Componentes de Astro
Refactorización externo

Contribuir Comunidad Patrocinar

Crea un componente de Navegación reutilizable

Crea una nueva carpeta src/components/