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ê precisará 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 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!

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

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 em vez 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. 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

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

Teste seu conhecimento

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

Seção intitulada “Checklist”

Recursos

Seção intitulada “Recursos”
Contribua Comunidade Sponsor