Construa seu primeiro layout

Se prepare para...

Refatorar elementos comuns em um layout de página
Utilizar um elemento <slot /> do Astro para colocar conteúdos da página em um layout
Passar valores específicos da página como props para seu layout

Você ainda tem alguns componentes Astro repetidamente renderizados em cada página. É hora de refatorar novamente para criar um layout de página compartilhado!

Crie seu primeiro componente de layout

Crie um novo arquivo em src/layouts/BaseLayout.astro. (Você irá preciasr criar uma nova pasta layouts primeiro.)

Copie todo o conteúdo de index.astro para seu novo arquivo, BaseLayout.astro.

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Página Inicial";
---
<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Header />
    <h1>{pageTitle}</h1>
    <Footer />
    <script>
      import "../scripts/menu.js";
    </script>
  </body>
</html>

Utilize seu layout em uma página

Substitua o código em src/pages/index.astro com o seguinte:

---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Página Inicial";
---
<BaseLayout>
  <h2>O subtítulo incrível do meu blog</h2>
</BaseLayout>

Verifique a pré-visualização do navegador novamente para notar o que (ou, alerta de spoiler: não) mudou.

Adicione um elemento <slot /> ao src/layouts/BaseLayout.astro acima do componente de Rodapé, e então verifique a pré-visualização do navegador de sua página Início e note o que realmente de fato mudou desta vez!

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Página Inicial";
---
<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Header />
    <h1>{pageTitle}</h1>
    <slot />
    <Footer />
    <script>
      import "../scripts/menu.js";
    </script>
  </body>
</html>

O <slot /> te permite injetar (ou “encaixar”) conteúdo filho escrito entre as tags de abertura e fechamento <Componente></Componente> em qualquer arquivo Componente.astro.

Passe valores específicos da página como props

Passe o título da página para seu componente de layout de index.astro utilizando um atributo do componente:

---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Página Inicial";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>O subtítulo incrível do meu blog</h2>
</BaseLayout>

Modifique o script do seu componente de layout BaseLayout.astro para receber um título da página através de Astro.props ao invés de definí-lo como uma constante.

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Página Inicial";
const { pageTitle } = Astro.props;
---

Verifique a pré-visualização da sua página para verificar que o título da sua página não mudou. Ele tem o mesmo valor, mas agora está sendo renderizado dinamicamente. E agora, cada página individual pode especificar seu próprio título para o layout.

Tente você mesmo - Utilize seu layout em todo lugar

Refatore suas outras páginas (blog.astro e about.astro) para que elas utilizem seu novo componente <BaseLayout> para renderizar elementos comuns da página.

Não se esqueça de:

Passar o título da página como props através de um atributo do componente.
Deixar o layout como responsável pela renderização HTML de quaisquer elementos comuns.
Excluir qualquer coisa de cada página que aquela página não é mais responsável por renderizar, pois está sendo lidado pelo layout, incluindo:
- Elementos HTML
- Componentes e suas importações
- Regras CSS em uma tag <style> (e.x. <h1> na sua página Sobre)
- Tags <script>