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

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

  1. Crie um novo arquivo: src/components/Navegacao.astro.

  2. Copie os seus links para navegar entre páginas do topo de qualquer página e os cole em seu novo arquivo, Navegacao.astro:

    src/components/Navegacao.astro
    ---
    ---
    <a href="/">Início</a>
    <a href="/sobre/">Sobre</a>
    <a href="/blog/">Blog</a>
  1. Volte para index.astro e importe o seu novo componente dentro da cerca de código:

    src/pages/index.astro
    ---
    import Navegacao from '../components/Navegacao.astro';
    ---
  2. 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="/sobre/">Sobre</a>
    <a href="/blog/">Blog</a>
    <Navegacao />
  3. 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 <Navegacao />.

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

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

Importe e utilize o componente <Navegacao /> nas outras duas páginas do seu site (sobre.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.
  1. Você pode fazer isso quando você tem elementos repetidos em múltiplas páginas:

  2. Componentes Astro são:

  3. Componentes Astro irão automaticamente criar uma nova página no seu site quando você…