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

Seção intitulada Crie seu primeiro componente de layout

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

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

    src/layouts/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

Seção intitulada 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 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 notar 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 Início e note o que realmente de fato mudou desta vez!

    src/layouts/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>
        <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

Seção intitulada 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 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 ao invés de definí-lo como uma constante.

    src/layouts/BaseLayout.astro
    ---
    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. 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

Seção intitulada 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>

Teste seu conhecimento

Seção intitulada 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

Seção intitulada Checklist

Recursos

Seção intitulada Recursos