Handleidingen

Je eigen HTML

Gebruik de standaard pagina-shell, vul hem aan, vervang delen of schrijf het hele document.

Elke route bepaalt zijn eigen HTML. De meeste routes gebruiken de standaard pagina-shell, [#html#], en vullen die met hun eigen markup. Heeft een pagina meer controle nodig, dan kun je de shell aanvullen, delen ervan vervangen, of het hele document zelf schrijven.

De standaardshell

Een route die eindigt met [#html#] krijgt een compleet document:

  • de <head> met de titel, meta description, canonical adres, tags voor delen op sociale media en favicons,
  • de stylesheet en scripts van het project,
  • header.tpl, main.tpl en footer.tpl uit de map van de route,
  • voor ingelogde redacteuren: inline bewerken, de pagina-acties en de Nimbly-balk,
  • de teamchat voor gebruikers met toegang, en de bot-tripwire-link.

De shell is gewone HTML rond je templates. Hij voegt geen omhullende markup of classes toe aan je content, behalve <header>, <main> en <footer>.

Paginavariabelen

Zet deze vóór [#html#]:

[#set page-title="[#project.title#]"#]
[#set page-description="Wayfinding for a working port."#]
[#set og-image=[#project.cover#]#]
[#set og-type=article#]
[#set body-classes="bg-stone-50 text-stone-900"#]
[#html#]
Variabele Effect
page-title De <title> en de titel bij delen
page-description De meta description; anders de beschrijving van de site
og-image, og-type De afbeelding bij delen (een media-UUID, een pad of een URL) en het type
page-canonical-url Het canonical adres, als dat afwijkt van het gevraagde
body-classes Classes op <body>
head Extra markup aan het eind van <head>
page-actions off verbergt de pagina-acties voor redacteuren op deze pagina

De shell aanvullen

Laad een lettertype, een stylesheet of een library op één pagina met head:

[#set head="<link rel='stylesheet' href='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'>"#]
[#html#]

Zet het eigen script van de pagina in index.js naast de index.tpl; de shell laadt het alleen op die route. Voor scripts waar meerdere templates op een pagina om kunnen vragen, voegt [#collect-script path#] een script één keer toe, aan het eind van de pagina.

Een deel van de shell vervangen voor de hele site

De shell bestaat uit kleine templates in core/tpl/html/: meta.tpl, fonts.tpl, stylesheets.tpl, scripts.tpl, favicon.tpl en andere. Een bestand met dezelfde naam in ext/tpl/html/ vervangt er één en laat de rest staan. Zo zet ext/tpl/html/fonts.tpl de lettertypen van de site, en kan ext/tpl/html/stylesheets.tpl een stylesheet toevoegen naast de standaard:

<link rel="stylesheet" href="[#base-url#]/app.css?v=[#app-modified#]">
<link rel="stylesheet" href="[#base-url#]/brand/brand.css">

De admin gebruikt dezelfde shell. Houd app.css en app.js in wat je vervangt, anders verliezen de admin en inline bewerken hun opmaak en gedrag.

Om de structuur van het document zelf te veranderen, kopieer je core/tpl/html/index.tpl naar ext/tpl/html/index.tpl en pas je die aan. De onderdelen blijven uit core komen. Je kopie volgt de core-updates van de shell niet meer, dus vervang liever één onderdeel als dat genoeg is.

Het hele document schrijven

Een route hoeft de shell niet te gebruiken. De index.tpl kan een compleet document zijn:

<!doctype html>
<html lang="[#detect-language#]">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Annual report 2026</title>
  <link rel="stylesheet" href="[#base-url#]/report/report.css">
</head>
<body>
  [#data chapters sort=sort_order|numeric|asc#]
  [#repeat data.chapters tpl=card-chapter#]
  <script type="module" src="[#base-url#]/report/report.js"></script>
</body>
</html>

Shortcodes, data, templates en rechten werken precies zoals op elke andere pagina. De route mist wat de shell levert: de metatags, de standaard-assets, inline bewerken, de pagina-acties, de teamchat en de bot-tripwire-link. Voeg terug wat je nodig hebt, bijvoorbeeld [#bot-tripwire-link#] vóór </body>.

Gebruik dit voor een landingspagina met een eigen design system, een ingebedde widget, een printlayout, een single-page application of een pagina voor een kioskscherm.

Verder lezen

Bekijk deze pagina als Markdown