Layouts

Layouts são um tipo especial de componente Astro úteis para criar templates de páginas reutilizáveis.

Um componente de layout é convencionalmente utilizado para providenciar a uma página .astro ou .md um invólucro (tags <html>, <head> e <body>) como também um <slot /> para especificar aonde o conteúdo da página deve ser injetado.

Layouts geralmente providenciam elementos <head> comuns assim como elementos comuns de UI para a página como cabeçalhos, barras de navegação e rodapés.

Componentes de layout são comumente inseridos no diretório src/layouts do seu projeto.

Layout de Exemplo

---
---
<html>
  <head>
    <meta charset="utf-8">
    <title>Meu Site Astro Maneiro</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <nav>
      <a href="#">Início</a>
      <a href="#">Postagens</a>
      <a href="#">Contato</a>
    </nav>
    <article>
      <slot /> <!-- seu conteúdo é injetado aqui -->
    </article>
  </body>
</html>

---
import LayoutDoMeuSite from '../layouts/LayoutDoMeuSite.astro';
---
<LayoutDoMeuSite>
  <p>Conteúdo da minha página, envolto em um layout!</p>
</LayoutDoMeuSite>

📚 Aprenda mais sobre slots.

Layouts Markdown

Layouts de páginas são especialmente úteis para arquivos Markdown. Arquivos Markdown podem utilizar a propriedade especial layout do frontmatter para especificar qual componente .astro deve ser utilizado como o layout da página.

---
layout: ../layouts/LayoutPostagemBlog.astro
titulo: Postagem no Blog
descricao: Minha primeira postagem no blog!
---
Esta é uma postagem escrita em Markdown.

Quando um arquivo Markdown inclui um layout, ele passa a propriedade content para o arquivo do layout que inclui as propriedades do frontmatter e o HTML resultante final da página.

---
const {content} = Astro.props;
---
<html>
  <!-- ... -->
  <h1>{content.titulo}</h1>
  <h2>Autor da postagem: {content.autor}</h2>
  <slot />
  <!-- ... -->
</html>

📚 Leia mais sobre o suporte a Markdown do Astro em nosso guia sobre Markdown.

Aninhando Layouts

Componentes de layout não precisam conter uma página inteira de HTML. Você pode separar seus layouts em pequenos componentes e então, reutilizá-los para criar layouts ainda mais flexíveis e poderosos no seu projeto.

Por exemplo, um layout comum para postagens de blogs pode conter um título, data e autor. Um componente de layout LayoutPostagemBlog.astro pode adicionar essa UI para a página enquanto também providencia um layout maior, utilizado por todo o site, para lidar com o resto da sua página.

---
import LayoutBase from '../layouts/LayoutBase.astro'
const {content} = Astro.props;
---
<LayoutBase>
  <h1>{content.titulo}</h1>
  <h2>Autor da postagem: {content.autor}</h2>
  <slot />
</LayoutBase>