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/
Seção intitulada 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
Seção intitulada 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>
Importe e utilize Navigation.astro
Seção intitulada Importe e utilize Navigation.astro-
Volte para
index.astroe importe o seu novo componente dentro da cerca de código:src/pages/index.astro ---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
Seção intitulada Tente você mesmo - Adicione navegação ao resto do seu siteImporte 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
Seção intitulada Teste seu conhecimento-
Você pode fazer isso quando você tem elementos repetidos em múltiplas páginas:
-
Componentes Astro são:
-
Componentes Astro irão automaticamente criar uma nova página no seu site quando você…