flows.md · documentação

Modelos#

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 modelo é 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 modelo: quem lê recebe a página dentro dele.

Escrever um modelo#

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

:::slot
:::

:::footer
Feito aqui.
:::

Os links de um modelo 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 modelo, e o mesmo modelo serve dois sites, cada um com os seus links. O link para a página que está sendo lida fica marcado.

Onde os modelos moram#

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

Vestir o modelo#

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

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 modelo 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 modelo por herança — só quando ela mesma diz o nome de outro.

Trocar uma parte numa página#

O modelo 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 modelo não tem fica onde foi escrito — nada do que você escreveu some.

Um modelo que veste outro#

O modelo 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.

site

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

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

Ver como fica#

O editor mostra o conteúdo da própria página. Para ver como ela é servida, dentro do modelo, abra Layout no menu do editor e escolha Ver como leitor — ou acrescente ?as=reader ao endereço.

Um exemplo que você pode abrir#

A vitrine Orbit tem três páginas e um só menu: ele está em templates / orbit, com versão em inglês, e as três o vestem dizendo só orbit.