Aplicando Layouts Existentes a Novas Páginas

1. Hook (A Trava Mental)

• Aprendiz: "Mestre, já tenho minha 'planta baixa' no arquivo BaseLayout.astro. Agora tenho minhas páginas index.astro, sobre.astro e uma nova que quero criar, contato.astro. Como eu 'visto' todas elas com essa mesma 'roupa', sem precisar copiar e colar o cabeçalho e rodapé em cada uma?"

2. Deep Dive (A Solução: Importar e Envelopar)

• Mestre: "O processo é elegante e simples, consistindo em apenas dois passos: Importar e Envelopar."

1. Importar: No topo do script da sua página (dentro do ---), você importa o arquivo do layout, da mesma forma que chamaria uma ferramenta de sua caixa.
2. Envelopar (Wrap): Você então "envelopa" todo o conteúdo exclusivo daquela página com as tags do layout que acabou de importar.

Ao fazer isso, você está dizendo ao Astro: "Pegue esta estrutura do BaseLayout, e no lugar exato do <slot />, insira este bloco de HTML que estou te dando."

Vamos ver isso em ação. Imagine que você tem uma página sobre.astro que está completamente autônoma, com todo o HTML repetido.

ANTES: src/pages/sobre.astro (Repetitivo)

<html lang="pt-br">
  <head>
    <meta charset="utf-8" />
    <title>Sobre Mim</title>
  </head>
  <body>
    <header>
      <a href="/">Início</a> | <a href="/sobre">Sobre</a>
    </header>
    <main>
      <h1>Sobre Mim</h1>
      <p>Eu sou um empreendedor serial apaixonado por tecnologia.</p>
    </main>
    <footer>
      <p>© 2024 Meu Negócio</p>
    </footer>
  </body>
</html>

Agora, vamos aplicar nosso BaseLayout.astro a ela.

DEPOIS: src/pages/sobre.astro (Refatorado e Limpo)

---
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout>
  <h1>Sobre Mim</h1>
  <p>Eu sou um empreendedor serial apaixonado por tecnologia.</p>
</BaseLayout>

Observe a diferença. O arquivo da página agora contém apenas o que é único nela. Todo o resto (<html>, <head>, <body>, <header>, <footer>) foi delegado ao BaseLayout.

3. O Fazer (Microlearning Prático)

Ver a transformação acontecer é a melhor forma de internalizar o conceito.

Agora que você viu o processo, a documentação oficial do Astro pode servir como um guia de referência rápida.

O resultado final em seu editor de código será algo limpo e claro, como mostrado na imagem abaixo, onde a página (index.astro) importa e usa o Layout, passando o conteúdo único para dentro dele.

4. Checkpoint (Dica de IA)

• Mestre: "Sua habilidade de validação agora sobe de nível. Você não apenas verifica se o layout tem um <slot />, mas também se as páginas estão usando o layout corretamente. Você pode instruir a IA com precisão cirúrgica."

Como dar a instrução para a IA:

"IA, refatore meu arquivo src/pages/contato.astro. Ele atualmente contém uma estrutura HTML completa. Quero que ele utilize meu layout localizado em src/layouts/BaseLayout.astro. Mantenha apenas o conteúdo dentro da tag <main> como conteúdo exclusivo dentro do novo componente BaseLayout e remova todo o resto do HTML repetido."

Seu Checklist de Validação Rápida:

1. O arquivo da página (.astro) tem a instrução import BaseLayout from '../layouts/BaseLayout.astro'; no topo?
2. Todo o código repetitivo (<html>, <head>, <footer>, etc.) foi removido do arquivo da página?
3. O conteúdo único da página está envolvido pelas tags <BaseLayout> ... </BaseLayout>?

Se a resposta for "sim" para os três, a IA executou a tarefa perfeitamente.

Conclusão

Nesta lição, você aprendeu o passo prático e transformador de aplicar layouts. Agora você pode criar quantas páginas quiser, todas compartilhando a mesma estrutura, mas cada uma com seu próprio conteúdo.

• Key Takeaways:

  • Aplicar um layout é um processo de duas etapas: importar o arquivo de layout e envelopar o conteúdo da página com suas tags.
  • Isso resulta em arquivos de página muito mais limpos e focados apenas no conteúdo exclusivo.
  • Qualquer alteração no BaseLayout.astro (ex: adicionar um novo link no menu) se refletirá instantaneamente em todas as páginas que o utilizam.

• Próximo Passo: Dominamos a reutilização da "casca" do site com Layouts. Mas e as peças menores dentro das páginas? E se quisermos reutilizar um botão, um card de produto ou um banner? Na próxima lição, mergulharemos no conceito de Componentes, os "blocos de Lego" que compõem suas páginas.