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, também guarda os layouts do próprio @docs. Os layouts dos seus espaços aparecem juntos em /~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 tem três páginas e um só menu: ele está em layouts / orbit, com versão em inglês, e as três o vestem dizendo só orbit.