Template maken

In het Procurios Platform worden website templates over het algemeen User Interfaces of UI’s genoemd. Deze drie termen betekenen hetzelfde en zijn in dat opzicht uitwisselbaar.

Indeling

In de User Interface module is een beperkt aantal hoofdfolders toegestaan. Dit heeft te maken met de werking van het Platform. Een eigen user interface overschrijft namelijk eigenlijk bestanden uit een standaard user interface. Als je alles weg laat is er dus niet niks, maar nog steeds een standaard uit het systeem. Dit noemen wij de uibase.

Om ervoor te zorgen dat hier niks gaat conflicteren zijn de volgende folders toegestaan:

  • article-templates: Hierin staan alle article templates: https://support.procurios.com/hc/nl/articles/360010436700-Artikel-templates
  • components: Hierin kunnen componenten uit het platform overschreven worden (er is geen overzicht van de mogelijkheden, zie bestaande UI’s)
  • font: Om font bestanden in te plaatsen
  • icons: Hierin kunnen icons uit het platform overschreven worden
  • img: Voor alle afbeeldingen die bij de user interface horen
  • lang: Hierin staan de vertaalbestanden
  • modules: In deze folder kunnen style, twig en javascript bestanden van modules overschreven worden (er is geen overzicht van de mogelijkheden, zie bestaande UI’s)
  • droplets: Naar eigen inzicht in te vullen
  • script: Voor alle javascript behorende bij de user interface
  • style: Voor alle CSS bestanden behorende bij de user interface
  • templates: Voor een aantal specifieke UI template bestanden (zie systeem token overzicht)
  • video: Om eventueel video’s in mp4 of web formaat behorende bij de template op te slaan (max 5 MB)
  • Verder kunnen op het hoofdniveau verschillende bestanden gemaakt worden: template.html en info.yml zijn verplicht!

Template engines

Procurios maakt voor website templates gebruik van verschillende template engines

  • Voor modules wordt gebruik gemaakt van 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. Hieronder vind je meer informatie over deze tokens. Deze bestanden hebben de .html extensie.

Template tokens

In deze templates vind je twee soorten tokens

Alle template tokens zijn te herkennen aan de hekjes

##content##

De UI tokens zijn weer in drie types te verdelen

  • Inhoud tokens: Hiervan zijn een aantal standaard tokens 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. Sommige hiervan zijn verplicht, andere kun je gebruiken om je template te verrijken.

Tokens met conditionele HTML

Sommige tokens kunnen op een plek in het CMS ingevuld worden. Zo kunnen bijvoorbeeld de meta keywords wel of niet gevuld zijn, of kan een kolom wel of geen artikelen bevatten. Als je bij een niet gevuld token ook bijbehorende html niet wil tonen dan kan dat.

##metakeywords[<meta name="keywords" content="*" />]##

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: *

Let op: ProDesign heeft een vergelijkbare constructie maar dan met {}-haken, geen hekjes aan het eind en twee sterretjes: **

Verplichte tokens

Om het platform goed te laten werken is er 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;

Systeem token overzicht

  • ##current_url##: Huidige url inclusief domeinnaam
  • ##charset##: Karakter set: UTF-8 (verplicht)
  • ##css##: Combineert en 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 kolom (verplicht)
  • ##sidebar##: De standaard zijkolom
  • ##notice##: De plek waar tijdelijke systeemmeldingen worden weergegeven
  • ##pathui##: Verzorgt pad naar bestanden in de huidige UI
  • ##pathdefaultui##: Verzorgt pad naar bestanden in de uibase
  • ##pathpub##: Publieke pad. Meestal /
  • ##site_url_root##: Domeinnaam van de huidige website
  • ##title##: Pagina titel zoals ingesteld als standaard of ‘browser titel’ (verplicht)
  • ##page_title##: Pagina titel zoals ingesteld als standaard of ‘pagina titel’
  • ##site_name##: Naam van de site, zoals ingesteld bij de siteinstellingen
  • ##menu##: Het standaard menu
  • ##submenu##: Standaard menu onder actieve menu item
  • ##navbar##: Vergelijkbaar met, maar niet hetzelfde als broodkruimelpad
  • ##breadcrumbs##: Broodkruimelpad structuur
  • ##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##: Copyright zoals ingesteld bij de website instellingen
  • ##pblib##: Script tags om PrototypeJS en pblib.js in te laden (verplicht)
  • ##login_simple##: HTML output die weer 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 javascript vertalingen geplaatst (verplicht)
  • ##profile_picture_url##: URL van de profiel afbeelding zoals ingesteld in het CRM voor de huidige gebruiker
  • ##userName##: Gebruikersnaam van de huidige gebruiker.
    Tags:
Hebt u meer vragen? Een aanvraag indienen
Was dit artikel nuttig?
Aantal gebruikers dat dit nuttig vond: 0 van 0
Mogelijk gemaakt door Zendesk