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

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

  1. Volte para index.astro e 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";
    ---

  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="/about/">Sobre</a>
    <a href="/blog/">Blog</a>
    <Navigation />

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

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
Contribua

O que passa em sua cabeça?

Criar uma Issue no GitHub

A maneira mais rápida de alertar nosso time sobre um problema.

Comunidade