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!

Get ready to…

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

What’s on your mind?

Create GitHub Issue

Quickest way to alert our team of a problem.

Community