Pular para o conteúdo

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

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

  2. 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

  1. 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>

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

  3. 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

  1. 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>

  2. 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;
---

  3. 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>

:::note[Mantendo os estilos da sua página Sobre]Usar o <BaseLayout> para mostrar sua página about.astro significa que você perderá a tag <style> adicionada ao <head> dessa página. Para continuar a estilizar itens somente no nível da página usando o estilo escopado do Astro, mova a tag <style> para o corpo do componente de página. Isso permite que você estilize elementos criados neste componente de página (como uma lista de suas habilidades).

Como agora seu <h1> é criado pelo seu componente de layout, você pode adicionar o atributo is:global em sua tag de estilo para afetar todos os elementos dessa página, incluindo aqueles criados por outros componentes: <style is:global define:vars={{ skillColor, fontWeight, textCase }}>:::

Teste seu conhecimento

  1. Um componente Astro (arquivo .astro) pode funcionar como:

  2. Para mostrar o título de uma página na página, você pode:

  3. Informação pode ser passada de um componente para outro ao:

Checklist

Recursos

Contribua Comunidade Sponsor