Pug

Geschreven door: op zaterdag 24 maart 2018

Leestijd: 3 minuten

pug.png

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.


Andere blogartikelen

  • Even voorstellen: Kevin Keijner

    Geschreven door: op vrijdag 12 februari 2021

    Sinds eind januari ben ik bij Sigma Solutions in dienst als Digital Consultant. Voor mij betekende dit niet alleen een nieuwe functie maar ook werken in een compleet nieuwe sector. Logischerwijs zorgt ...

    Bekijk het artikel »
  • B2B Marketing & Sales trends in onzekere tijden

    Geschreven door: op donderdag 11 februari 2021

    Wij leveren in een onzekere tijd door COVID-19. Dit heeft impact op de B2B aankoopreis, vooral omdat persoonlijk contact een belangrijke rol speelt. Wat kunnen marketeers en verkopers dan doen in dez ...

    Bekijk het artikel »
  • Delegates in C#

    Geschreven door: op donderdag 11 februari 2021

    Soms willen we bij het oplossen van een probleem in code een bepaalde functie uitvoeren op basis van een voorwaarde of situatie. Je kan dan via if-then-else of een switch bepalen welke functie je uitv ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Bekijk al onze tevreden klanten ›
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten

E-book

Zo wordt uw website een lead generator:
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book Â»

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book â€º