Pular para o conteúdo
Astro Astro

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/LayoutBase.astro. (Você irá preciasr criar uma nova pasta layouts primeiro.)

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

    src/layouts/LayoutBase.astro
    ---
    import Cabecalho from '../components/Cabecalho.astro';
    import Rodape from '../components/Rodape.astro';
    import '../styles/global.css';
    const tituloPagina = "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>{tituloPagina}</title>
      </head>
      <body>
        <Cabecalho />
        <h1>{tituloPagina}</h1>
        <Rodape />
        <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:

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

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

  3. Adicione um elemento <slot /> ao src/layouts/LayoutBase.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!

    src/layouts/LayoutBase.astro
    ---
    import Cabecalho from '../components/Cabecalho.astro';
    import Rodape from '../components/Rodape.astro';
    import '../styles/global.css';
    const tituloPagina = "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>{tituloPagina}</title>
      </head>
      <body>
        <Cabecalho />
        <h1>{tituloPagina}</h1>
        <slot />
        <Rodape />
        <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

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

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

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

    src/layouts/LayoutBase.astro
    ---
    import Cabecalho from '../components/Cabecalho.astro';
    import Rodape from '../components/Rodape.astro';
    import '../styles/global.css';
    const tituloPagina = "Página Inicial";
    const { tituloPagina } = Astro.props;
    ---

  3. 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 sobre.astro) para que elas utilizem seu novo componente <LayoutBase> 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>

Teste seu conhecimento

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

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

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

Checklist

Recursos