Conceitos

Templates

Templates sem lógica, shortcodes e apresentação reutilizável.

Templates são arquivos simples no formato de saída, normalmente HTML, com shortcodes entre [# e #]. Um template tem a extensão .tpl.

<h1>[#get project.title#]</h1>
[#data projects filter=published:1#]
<ul>[#repeat data.projects tpl=card-project#]</ul>

Sem lógica, por princípio

Um template exibe valores, repete um template para uma lista e, no máximo, escolhe qual template vem a seguir. Não há blocos de lógica, laços com condições nem expressões dentro de um template. Decisões, cálculos e preparação de dados ficam em bibliotecas, onde podem ser lidos e testados num só lugar.

Isso mantém o markup fácil de ler e de mudar para todos que trabalham na interface, e mantém as regras da aplicação numa única camada.

Templates reutilizáveis

Uma pasta em ext/tpl/ com um index.tpl é um template que você chama pelo nome:

ext/tpl/site-header/index.tpl     [#site-header#]
ext/tpl/card-project/index.tpl    [#card-project#]

Um template lê as variáveis ao redor dele. Para passar um valor, defina a variável antes da chamada:

[#set back_url=/projects overwrite#]
[#back-link#]

Dentro do template, [#get back_url default=/#] lê esse valor. Uma convenção de nomes mantém um projeto em crescimento fácil de navegar: primeiro o tipo, depois o assunto, como em page-about, section-home-hero, card-project, icon-arrow.

Shortcodes

Shortcode Faz
[#get name#] Exibe uma variável, um campo de registro (project.title) ou um valor de um caminho aninhado
[#set name=value#] Define uma variável, se ela ainda não tiver valor
[#data resource#] Carrega registros em data.<resource>, com filter, sort, limit e offset
[#repeat list tpl=name#] Exibe um template para cada item, com o item em item
[#if condition tpl=name#] Exibe um template, imprime um valor ou redireciona quando uma condição vale
[#get-html field#] Exibe texto formatado, editável na página pelos editores
[#get-img-html uuid sizes=...#] Exibe uma imagem responsiva
[#text Label#] Exibe um texto traduzido da interface
[#fmt ...#] Formata um valor como data, número, texto simples, JSON e mais

A lista completa está na referência de shortcodes.

[#set#] mantém o primeiro valor

Um [#set#] simples não faz nada quando a variável já tem valor. Assim, uma rota pode definir cedo o título da página, e o padrão da shell nunca o sobrescreve. Acrescente overwrite quando quiser substituir um valor de propósito, por exemplo ao passar dados para um template reutilizável.

Para acrescentar a um valor, use append. Ele adiciona o novo valor depois de um espaço, ou depois do separador que você informar:

[#set body-classes="faq" append#]      adds faq to the classes already set
[#set tags="news" append=,#]           adds news after a comma
[#set body-classes="faq" overwrite#]   replaces whatever was set

[#if#] é uma tag única

O [#if#] não tem forma de bloco. Ele diz o que fazer, e o markup condicional fica num template próprio:

[#if project.cover=(not-empty) tpl=project-cover tpl_else=project-placeholder#]
[#if status=published echo=Live#]
[#if user=(empty) redirect=login#]

Compondo nomes

Shortcodes podem ser aninhados, inclusive no nome de um shortcode. Isso transforma um campo de tipo numa escolha de template, sem ramificações:

[#card-[#get item.type default=generic#]#]

Para um item do tipo news, isso exibe [#card-news#]; sem tipo, exibe [#card-generic#].

Templates para outros formatos

Um template não se limita a HTML. Uma rota pode gerar JSON, XML, CSV ou texto simples a partir de um template, com os mesmos shortcodes. Veja O que uma rota devolve.

Leia a seguir

Ver esta página em Markdown