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/

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

  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>

Importe e utilize Navegacao.astro

Seção intitulada Importe e utilize Navegacao.astro

  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.

Teste seu conhecimento

Seção intitulada Teste seu conhecimento

  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ê…

Checklist

Seção intitulada Checklist

Recursos

Seção intitulada Recursos