Pug

Pug is een template engine die html code schrijven makkelijker en sneller maakt. De ´pug code´ wordt opgeslagen in een .pug bestand. Zodra deze pagina als website wordt bezocht wordt de code doormiddel van javascript omgezet naar de correcte html.

Code verschillen

Pug lijkt erg op html code, maar er zijn een aantal verschillen waardoor pug overzichtelijker is en sneller om te schrijven. Meest opvallend is misschien nog wel dat de html niet meer in tags hoeft te staan ( de ‘<’ en ‘>’ tekens). Pug gaat ervanuit dat deze html tags altijd aan het begin van de regel staan. Verder hoeven tags ook niet meer afgesloten te worden. In html wordt een tag altijd afgesloten door een </ > blok. Bij pug wordt dit geregeld via ‘tab indents’. Als code verder naar rechts staat is dit onderdeel van de bovenliggende tag, zo niet dan wordt de tag beëindigd (zie ook figuur 1 en 2).


html
        head
                title Pug example
        body
                h1 Pug example
                p Lorem ipsum dolor sit amet

Figuur 1 - Voorbeeld van Pug code


<html>
        <head>
                <title>Pug example</title>
        </head>
        <body>
                <h1>Pug example</h1>
                <p>
                        Lorem ipsum dolor sit amet
                </p>
        </body>
</html>

Figuur 2 - Html gegenereerd van figuur 1

Variabelen

Naast de aangepaste html maakt Pug het ook makkelijker om javascript variabelen te tonen op een pagina. De variabelen kunnen rechtstreeks in de pug code gezet worden en worden automatisch omgezet naar de correcte waarde (zie figuur 3).


// In Javascript
var _variable = ‘mijn tekst.’;

// In Pug
h1= _variable
// of
h1 dit is #{_variable}

// Gegenereerde html
< h1>
        mijn tekst.
</ h1>
// en
< h1>
        Dit is mijn tekst.
</ h1>

Figuur 3 - Javascript variabelen in Pug

Implementatie

Pug is module van node.js en kan alleen worden gebruikt als een server op node.js draait. Via de ‘node package manager’ (npm) kan Pug vervolgens toegevoegd worden aan de website. Een volledig uitleg van het instaleren van Pug is te vinden op https://pugjs.org/api/getting-started.html. Verder zijn er een aantal node.js frameworks zoals express waarbij pug standaard is inbegrepen.