Templates

Templates zijn gewone bestanden in het uitvoerformaat, meestal HTML, met shortcodes tussen [# en #]. Een template heeft de extensie .tpl.

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

Bewust zonder logica

Een template toont waarden, herhaalt een template voor een lijst en kiest hooguit welke template volgt. Er zijn geen logicablokken, lussen met voorwaarden of expressies in een template. Beslissingen, berekeningen en datavoorbereiding staan in libraries, waar je ze op één plek kunt lezen en testen.

Zo blijft markup makkelijk te lezen en aan te passen voor iedereen die aan de interface werkt, en blijven de regels van de applicatie in één laag.

Herbruikbare templates

Een map in ext/tpl/ met een index.tpl is een template die je bij zijn naam aanroept:

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

Een template leest de variabelen om zich heen. Om hem een waarde te geven, zet je de variabele vóór de aanroep:

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

In de template leest [#get back_url default=/#] die waarde. Een naamgevingsconventie houdt een groeiend project overzichtelijk: eerst het type, dan het onderwerp, zoals in page-about, section-home-hero, card-project, icon-arrow.

Shortcodes

Shortcode	Doet
`[#get name#]`	Toont een variabele, een veld van een record (`project.title`) of een waarde uit een genest pad
`[#set name=value#]`	Zet een variabele, als die nog geen waarde heeft
`[#data resource#]`	Laadt records in `data.<resource>`, met `filter`, `sort`, `limit` en `offset`
`[#repeat list tpl=name#]`	Toont een template voor elk item, met het item in `item`
`[#if condition tpl=name#]`	Toont een template, print een waarde of stuurt door als een voorwaarde klopt
`[#get-html field#]`	Toont opgemaakte tekst, ter plekke bewerkbaar voor redacteuren
`[#get-img-html uuid sizes=...#]`	Toont een responsieve afbeelding
`[#text Label#]`	Toont een vertaalde interfacetekst
`[#fmt ...#]`	Formatteert een waarde als datum, getal, platte tekst, JSON en meer

De volledige lijst staat in de naslag van de shortcodes.

`[#set#]` houdt de eerste waarde

Een gewone [#set#] doet niets als de variabele al een waarde heeft. Een route kan dus vroeg zijn paginatitel zetten, en de standaardwaarde van de shell overschrijft die nooit. Voeg overwrite toe als je een waarde bewust wilt vervangen, bijvoorbeeld als je data aan een herbruikbare template doorgeeft.

Wil je iets aan een waarde toevoegen, gebruik dan append. Dat zet de nieuwe waarde erachter na een spatie, of na het scheidingsteken dat je opgeeft:

[#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#]` is één tag

[#if#] heeft geen blokvorm. Het noemt wat er moet gebeuren, en voorwaardelijke markup staat in een eigen template:

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

Namen samenstellen

Shortcodes kunnen genest worden, ook in de naam van een shortcode. Zo wordt een typeveld een keuze van template zonder vertakkingen:

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

Voor een item van type news toont dit [#card-news#]; zonder type toont het [#card-generic#].

Templates voor andere formaten

Een template is niet beperkt tot HTML. Een route kan JSON, XML, CSV of platte tekst uit een template maken, met dezelfde shortcodes. Zie Wat een route teruggeeft.

Verder lezen

Templatesyntax en Shortcodes in de naslag.
Libraries voor de logica achter een template.