Pular para o conteúdo

Faça um componente de Navegação reutilizável

Agora que você tem o mesmo HTML escrito em múltiplas páginas do seu site Astro, é hora de substutuir esse conteúdo duplicado com um componente Astro reutilizável!

Se prepare para...

Criar uma nova pasta para componentes
Construir um componente Astro para mostrar seus links de navegação
Substituir HTML existente com um novo, e reutilizável componente de navegação

Crie uma nova pasta `src/components/`

Para guardar arquivos .astro que irão gerar HTML mas que não se tornarão novas páginas no seu website, você irá precisar de uma nova pasta no seu projeto: src/components/.

Crie um componente de Navegação

Crie um novo arquivo: src/components/Navigation.astro.
Copie os seus links para navegar entre páginas do topo de qualquer página e os cole em seu novo arquivo, Navigation.astro:
src/components/Navigation.astro
```
---
---
<a href="/">Início</a>
<a href="/about/">Sobre</a>
<a href="/blog/">Blog</a>
```
Se não tiver nada no frontmatter do seu arquivo .astro, você não precisar escrever as cercas de código. Você pode sempre adicioná-las de volta quando necessário.

Importe e utilize Navigation.astro

Volte para index.astro e importe o seu novo componente dentro da cerca de código:

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

const pageTitle = "Página Inicial";
---

Então abaixo, substitua os elementos HTML de navegação por links existente com o novo componente de navegação que você acabou de importar:
src/pages/index.astro
```
<a href="/">Início</a>
<a href="/about/">Sobre</a>
<a href="/blog/">Blog</a>
<Navigation />
```
Verifique a pré-visualização no seu navegador e note que ele deve se parecer exatamente o mesmo… e é isso o que você deseja!

Seu site contém o mesmo HTML de antes. Porém agora, essas três linhas de código são fornecidas pelo componente <Navigation />.

Tente você mesmo - Adicione navegação ao resto do seu site

Importe e utilize o componente <Navigation /> nas outras duas páginas do seu site (about.astro e blog.astro) utilizando o mesmo método.

Não se esqueça de

Adicionar uma declaração de importação ao topo do script do componente, dentro da cerca de código.
Substituir o código existente com o componente de navegação.

Teste seu conhecimento

Você pode fazer isso quando você tem elementos repetidos em múltiplas páginas:
1. reiniciar o servidor de desenvolvimento
2. refatorar para utilizar um componente reutilizável
3. criar uma nova página
Componentes Astro são:
1. reutilizáveis
2. fragmentos de HTML
3. ambas as opções acima!
Componentes Astro irão automaticamente criar uma nova página no seu site quando você…
1. incluir <html></html>
2. refatorar
3. colocar o arquivo .astro em src/pages/

Checklist

Eu posso refatorar conteúdo em componentes reutilizáveis.
Eu posso adicionar um novo componente em uma página .astro.

Recursos

Visão Geral sobre Componentes Astro
Refatoração externo

Contribua Comunidade Sponsor