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ê precisará 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 observar 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 de Início e observe o que de fato realmente 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 /> permite que você injete (ou “encaixe”) 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 em vez 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;
---

Confira a pré-visualização no navegador para verificar que o título da página não mudou. Ele tem o mesmo valor, mas agora está sendo apresentado dinamicamente. E agora, cada página individual poderá 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 mostrar elementos comuns da página.

Não se esqueça de:

Passar o título da página como props via atributo do componente.
Deixar o layout como responsável pela apresentação HTML de quaisquer elementos comuns.
Mover quaisquer tags <style> do <head> da página com estilos que você quer manter para o modelo de página HTML.
Excluir qualquer coisa de cada página individual que agora é manipulada pelo layout, incluindo:
- Elementos HTML
- Componentes e suas importações
- Regras CSS em uma tag <style> (como <h1> na sua página Sobre)
- Tags <script>

Checklist

Eu posso criar um componente de layout Astro com um <slot />.
Eu posso enviar propriedades específicas da página para um layout.

Recursos

Contribua Comunidade Sponsor