Templates

Structuur

Templates bestaan voornamelijk uit HTML, waarin zich een formulier bevind die de gebruiker laat doorverwijzen naar een abonneepagina. Een ruwe template kan er als volgt uit zien:

<div>
    <h2>Premium artikel!</h2>
    <img src="https://freave.cdn.freavehd.net/logos/icon-slug/white.svg" alt="Freave logo">

    <button type="submit">Abonneer nu!</button>
</div>

Interactie

Er zijn 2 manieren om de submit-knop toe te voegen:

<input type="submit" value="Abonneer nu (1)">

<button type="submit">Abonneer nu (2)</button>

Er zijn geen verschillen tussen de 2 manieren, behalve dat de eerste manier een standaardstijl heeft.

Attributen

Alle attributen die je hier vindt kun je gebruiken in een template. Dit doe je door middel van de attribuut tussen {{ }} te zetten, zoals {{ post.author.displayName }}:

<div>
    <h2>Premium artikel van {{ post.author.displayName }}!</h2>
    <img src="https://freave.cdn.freavehd.net/logos/icon-slug/white.svg" alt="Freave logo">

    <button type="submit">Abonneer nu!</button>
</div>

Opmaak

Je kunt de opmaak van de template aanpassen door middel van CSS. Dit kan alleen inline, dus niet in een apart CSS-bestand. Dit doe je door middel van de style-attribuut:

<div style="width: 100%">
    <h2 style="color: #fa383e">Premium artikel van {{ post.author.displayName }}!</h2>
    <img src="https://freave.cdn.freavehd.net/logos/icon-slug/white.svg" alt="Freave logo">

    <button type="submit">Abonneer nu!</button>
</div>

... of bestaande classes van het project waarin het getoond wordt, zoals TailWind, Bootstrap of custom classes. Bestaande CSS variabelen kun je ook gebruiken:

<div class="w-full p-2 bg-red-600 rounded" style="opacity: var(--custom-opacity)">
    <h2 class="text-white">Premium artikel van {{ post.author.displayName }}!</h2>
    <img src="https://freave.cdn.freavehd.net/logos/icon-slug/white.svg" alt="Freave logo" class="mt-2">

    <button type="submit" class="p-1 bg-black text-red-500 rounded">Abonneer nu!</button>
</div>