In de Website Template is een specifieke set van hoofdmappen toegestaan. Dit heeft te maken met de werking van het Procurios Platform. Het platform hanteert een basis-template, de zogenaamde ui-base, waar een website op terugvalt. Zodra je een eigen Website Template bouwt, overschrijft elke map en elk bestand daarvan de equivalent uit de ui-base. Als je alles in je eigen template weglaat, zijn er dus nog steeds de standaard mappen en bestanden uit het de ui-base.

Om ervoor te zorgen dat niets in je Website Template gaat conflicteren met de ui-base zijn op hoofdniveau de volgende mappen toegestaan:

• article-templates: hierin staan alle artikel templates
• components: hierin kunnen componenten uit het platform overschreven worden (er is geen overzicht van de mogelijkheden, zie bestaande UI’s)
• droplets: naar eigen inzicht in te vullen
• font: om fontbestanden in te plaatsen
• icons: hierin kunnen icons uit het platform overschreven worden
• img: hierin staan alle afbeeldingen die bij de Website Template horen 
• lang: hierin plaatst het platform automatisch eventuele vertaalbestanden, je zet daarom zelf geen bestanden in deze map
• modules: in deze folder kunnen style-, twig- en javascriptbestanden van modules overschreven worden (er is geen overzicht van de mogelijkheden, zie bestaande UI’s)
• preview: in deze verplichte map staan de pictogrammen die in het CMS worden gebruikt om (inhouds-)containers te duiden (jpg, png, webp)
• script: hierin plaats je al jouw javascriptbestanden
• style: in deze verplichte map staan CSS-bestanden van jouw Website Template (m.u.v. module-, component- en article-template-bestanden)
• templates: voor een aantal specifieke UI template bestanden (zie het kopje Systeem token overzicht)
• video: om eventueel video’s in mp4- of webformaat behorende bij jouw Website Template op te slaan (max 5 MB)

Op het hoofdniveau kunnen de verplichte  template.html , info.yml en optionele bestanden  variant-*.html gemaakt worden. De HTML templatebestanden moeten minstens de verplichte template tokens bevatten.

Procurios maakt voor Website Templates gebruik van verschillende template engines:

• Voor modules gebruiken we de TWIG template engine. Deze bestanden zijn te herkennen aan de .html.twig extensie. De documentatie daarvan is te vinden op de TWIG website: https://twig.symfony.com/doc/3.x/
• Voor het overige deel van de template gebruiken we een eigen template engine. Deze bevat verschillende tokens die speciaal gemaakt zijn om aan te sluiten op Procurios CMS. Deze bestanden hebben de .html extensie. 
• Hieronder vind je meer informatie over deze tokens.

In onze templates vind je twee soorten tokens:

• ProDesign tokens, voor de Ontwerp instellingen. Te herkennen aan de {}-haken. Daarover lees je hier meer.
• UI tokens, voor alle andere gegevens die in de template kunnen. Te herkennen aan []-haken, of géén haken.

Alle tokens in een template zijn te herkennen aan de hekjes, bijvoorbeeld:

De UI tokens zijn weer in drie types te verdelen:

• Inhoud tokens: hiervan zijn een aantal standaard en deze kun je verder definiëren in de info.yml
• Menu tokens: ook hiervan zijn een aantal standaard en kun je deze verder in de info.yml definiëren.
• Systeem tokens: er zijn verschillende speciale tokens, waarvan sommige met geavanceerde functionaliteit die door het platform worden aangeboden. Een deel van deze tokens is verplicht, andere kun je gebruiken om je template te verrijken.

Sommige tokens kunnen op een plek in het CMS ingevuld worden. Zo kan bijvoorbeeld het meta keywords token in het CMS optioneel ingevuld worden, en kan een container(-token) wel of geen artikelen bevatten. Als je bij een niet gevuld token ook bijbehorende html niet wil tonen dan kan dat. Bijvoorbeeld:

De html die tussen de []-haken staat, wordt alleen getoond als het token gevuld is. De inhoud van het token wordt getoond op de plek van het sterretje: *

Om het platform goed te laten werken, is een aantal tokens verplicht in een template.

De head moet de volgende tokens bevatten:

• ##charset##
• ##css##
• ##metadescription##
• ##pblib##
• ##head##
• ##uigcache##

De body moet de volgende tokens bevatten:

• ##body##
• ##body_class##
• ##content##
• ##notice##

De title moet het ##title## token bevatten;

• ##current_url##: huidige URL inclusief domeinnaam
• ##charset##: karakterset: UTF-8 (verplicht)
• ##css##: combineert én minified template CSS-bestanden automatisch. Ook andere aanvullende CSS-bestanden die ingeladen worden, komen op deze plek te staan. (verplicht)
• ##body##: voor informatie die als laatste in de body toegevoegd moet worden (verplicht)
• ##body_class##: toon classes die door andere modules worden toegevoegd aan de body (verplicht)
• ##head##: voor bestanden die door het platform in de head toegevoegd worden (verplicht)
• ##content##: de standaard (hoofd-)inhoudscontainer (verplicht)
• ##sidebar##: de standaard secundaire inhoudscontainer
• ##notice##: de plek waar incidentele systeemmeldingen worden weergegeven
• ##pathui##: verzorgt het pad naar bestanden in de huidige UI
• ##pathdefaultui##: verzorgt het pad naar bestanden in de ui-base
• ##pathpub##: publieke pad. Meestal alleen de /
• ##site_url_root##: domeinnaam van de huidige website
• ##title##: paginatitel zoals ingesteld als standaard, of ‘browsertitel’ (verplicht)
• ##page_title##: paginatitel zoals ingesteld als standaard, of ‘paginatitel’
• ##site_name##: naam van de site, zoals ingesteld bij de site-instellingen
• ##menu##: het standaard menu
• ##submenu##: het standaard menu onder het actieve menu-item
• ##navbar##: vergelijkbaar met, maar niet hetzelfde als broodkruimelpad
• ##breadcrumbs##: broodkruimelpad
• ##metadescription##: de meta description zoals ingevuld in het CMS (verplicht)
• ##metakeywords##: de meta keywords zoals ingevuld in het CMS
• ##metaauthor##: de auteur van de pagina zoals ingevuld bij de website-instellingen
• ##language##: de taalcode voor in het lang-attribuut 
• ##search##: standaard HTML voor een zoekformulier, dat submit naar de standaard zoekpagina
• ##copyright##: copyrighttekst zoals ingesteld bij de website-instellingen
• ##pblib##: script-tags om PrototypeJS en pblib.js in te laden (verplicht)
• ##login_simple##: HTML-output die weergeeft of de gebruiker ingelogd is of niet. Custom twig in: 'templates > user > login-simple.html.twig'
• ##languages##: HTML-output voor de taalswitcher. Custom twig in: 'templates > language > languages.html.twig'
• ##uigcache##: hier worden javascriptvertalingen geplaatst (verplicht)
• ##profile_picture_url##: URL van de profielafbeelding zoals ingesteld in het CRM voor de huidige gebruiker
• ##userName##: gebruikersnaam van de huidige gebruiker.