Layouts
Layouts são componentes Astro usados para fornecer uma estrutura de UI reutilizável, como um template de página.
Nós convenientemente utilizamos o termo “layout” para componentes Astro que fornecem elementos comuns de UI compartilhados entre páginas como cabeçalhos, barras de navegação e rodapés. Um típico componente de layout Astro fornece páginas Astro, Markdown ou MDX com:
- uma casco da página (tags
<html>
,<head>
e<body>
) - um
<slot />
para especificar onde o conteúdo individual da página deve ser injetado.
Porém, não há nada de especial sobre um componente de layout! Eles podem receber props e importar e utilizar outros componentes como qualquer outro componente Astro. Eles podem incluir componentes de frameworks de UI e scripts no lado do cliente. Eles nem precisam fornecer uma casco completo da página, e podem ser utilizados como templates parciais de UI ao invés disso.
Componentes de layout são comumente inseridos em um diretório src/layouts
no seu projeto por organização, mas isso não é uma obrigação; você pode escolher colocar eles em qualquer lugar em seu projeto. Você pode até colocar componentes de layout juntamente das suas páginas prefixando os nomes dos layouts com _
.
Layout de Exemplo
Seção intitulada Layout de Exemplo---import HeadBase from '../components/HeadBase.astro';import Rodape from '../components/Rodape.astro';const { titulo } = Astro.props;---<html lang="pt-BR"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <HeadBase titulo={titulo}/> </head> <body> <nav> <a href="#">Início</a> <a href="#">Postagens</a> <a href="#">Contato</a> </nav> <h1>{titulo}</h1> <article> <slot /> <!-- seu conteúdo é injetado aqui --> </article> <Rodape /> </body></html>