```theme
technical
accent: #4f46e5
page_width: 900
page_padding: 24
```

```meta
title: Layouts — o que as páginas têm em comum
description: Um menu, um rodapé e uma coluna lateral escritos uma vez, numa página-layout que as outras vestem. Com partes que cada página pode trocar.
```

_flows.md · documentação_

# Layouts

Num site, quase todas as páginas têm a mesma coisa em volta: o menu em cima, o rodapé embaixo, às vezes uma coluna lateral. Copiar isso em cada página funciona até o dia em que o menu muda — e aí são dez páginas para consertar.

Um **layout** é uma página comum que tem um `:::slot`. O que está em volta do slot é o que as páginas têm em comum. As outras páginas **vestem** o layout: quem lê recebe a página dentro dele.

## Escrever um layout

````
:::nav
**[Estúdio](./)**
---
- [Trabalho](./trabalho)
- [Sobre](./sobre)
:::

:::slot
:::

:::footer
Feito aqui.
:::
````

Os links de um layout valem **a partir da página que o declarou** — a raiz do site. `./sobre` é o "sobre" daquele site em toda página que veste o layout, e o mesmo layout serve dois sites, cada um com os seus links. O link para a página que está sendo lida fica marcado.

## Onde os layouts moram

Na página `layouts` do espaço: o layout chamado `site` é a página `/@voce/layouts/site`. É uma página como as outras — tem editor, idiomas e histórico — e é por isso que esta página aqui, [/@docs/layouts](/@docs/layouts), também guarda os layouts do próprio @docs. Os layouts dos seus espaços aparecem juntos em [/~layouts](/~layouts), ao lado das suas views.

## Vestir o layout

Uma cerca com o **nome** do layout, uma vez, na página raiz do site:

````
```layout
site
```
````

Um nome, não um endereço: nada de caminho, nada de til.

Vale para a página e para **todas as que estão abaixo dela**. A ordem é a dos temas: a cerca da própria página, depois a da página mais próxima acima, depois nada.

| Na cerca | O que faz |
|---|---|
| `site` | veste o layout `site` deste espaço (`docs/guia` também vale: uma página dentro de outra) |
| `cascade: false` | só esta página veste, as de baixo não |
| `none` | esta página (e as de baixo) não vestem nada |

Uma página que tem slot nunca veste um layout por herança — só quando ela mesma diz o nome de outro.

## Trocar uma parte numa página

O layout pode ter lugares com nome, cada um com o que aparece quando ninguém diz outra coisa:

````
:::slot name:cta
## Vamos conversar
[Escreva para a gente](./contato)
:::
````

Uma página troca esse pedaço com `:::fill`:

````
:::fill name:cta
## Estamos contratando
[Ver as vagas](./vagas)
:::
````

Os nomes são `main` (o conteúdo da página), `hero`, `aside`, `top`, `bottom` e `cta`. Um `:::fill` para um lugar que o layout não tem fica onde foi escrito — nada do que você escreveu some.

## Um layout que veste outro

O layout da documentação pode vestir o do site: o do site dá o menu e o rodapé, o da documentação acrescenta a coluna lateral em volta do slot.

````
```layout
site
```

:::section width:wide
:::split rail:16 sticky:first
**Guia**

[Começar](./comecar)
---
:::slot
:::
:::
:::
````

## Um site sem o app em volta

Quem lê uma página a vê dentro do flows.md: o cabeçalho com o caminho das páginas em volta. Um site com o próprio menu pede para ser visto sozinho, e diz isso com um bloco `view`:

````
```view
standalone: true
```
````

Assim o leitor recebe só a página, com uma marquinha no canto (a visibilidade e o login, que nunca somem), sem as âncoras ao lado dos títulos e sem o sumário, a menos que o tema peça. Quem pode editar continua vendo o app em volta do editor. Como o layout, vale para a página e para as de baixo: ponha uma vez na raiz do site; `standalone: false` desliga numa página e nas de baixo dela. É um jeito de ver, não uma aparência, por isso não fica no tema (o antigo `chrome: site` do tema continua valendo).

## Ver como fica

O editor mostra a página dentro do layout que ela veste, e você escreve no lugar do conteúdo; os links do layout funcionam e levam às outras páginas, também no editor. Para ver exatamente o que o leitor recebe, abra **Página** no menu do editor e escolha **Ver como leitor** — ou acrescente `?as=reader` ao endereço; os links continuam no modo leitor.

## Um exemplo que você pode abrir

A vitrine [Orbit](/@docs/showcase/orbit) tem três páginas e um só menu: ele está em [layouts / orbit](/@docs/layouts/orbit), com versão em inglês, e as três o vestem dizendo só `orbit`.