Skip to content

Latest commit

 

History

History
153 lines (112 loc) · 4.9 KB

1.mdx

File metadata and controls

153 lines (112 loc) · 4.9 KB
Raw
type title description i18nReady
tutorial
Faça um componente de Navegação reutilizável
Tutorial: Construa seu primeiro blog Astro — Substitua elementos repetidos em múltiplas páginas com um componente reutilizável
true

import Badge from '/components/Badge.astro'; import Box from '/components/tutorial/Box.astro'; import Checklist from '/components/Checklist.astro'; import MultipleChoice from '/components/tutorial/MultipleChoice.astro'; import Option from '/components/tutorial/Option.astro'; import PreCheck from '/components/tutorial/PreCheck.astro';

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!

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

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

  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:

    ---
---
<a href="/">Início</a>
<a href="/about/">Sobre</a>
<a href="/blog/">Blog</a>

    :::tip Se não tiver nada no frontmatter do seu arquivo .astro, você não precisar escrever as cercas de código. Você pode sempre adicioná-las de volta quando necessário. :::

Importe e utilize Navigation.astro

  1. Volte para index.astro e importe o seu novo componente dentro da cerca de código:

    ---
import Navigation from '../components/Navigation.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:

    <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

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.

:::note Quando você reestrutura o seu código mas não muda a forma que a sua página aparece no navegador, você está refatorando. Você irá refatorar diversas vezes nesta unidade conforme você substitui partes do HTML da sua página com componentes.

Isso te permite começar rapidamente com um código funcional, geralmente duplicado através do seu projeto. Então, você pode melhorar o design do seu código existente incrementalmente sem mudar a aparência externa do seu site. :::

Teste seu conhecimento

  1. Você pode fazer isso quando você tem elementos repetidos em múltiplas páginas:

    reiniciar o servidor de desenvolvimento refatorar para utilizar um componente reutilizável criar uma nova página

  2. Componentes Astro são:

    reutilizáveis fragmentos de HTML ambas as opções acima!

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

    incluir `` refatorar colocar o arquivo `.astro` em `src/pages/`

Checklist

- [ ] Eu posso refatorar conteúdo em componentes reutilizáveis. - [ ] Eu posso adicionar um novo componente em uma página `.astro`.

Recursos