Pug

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

  • Waarom developers het zo leuk vinden bij ons

    Geschreven door: op woensdag 13 november 2019

    Bij ons op kantoor werkt een team van betrokken specialisten, waaronder 4 backend developers en 4 UX developers. Zij zorgen voor een belangrijk fundament binnen dit bedrijf. Een goede reden om te zorg ...

    Bekijk het artikel »
  • Beachvolleyballen voor het goede doel!

    Geschreven door: op vrijdag 25 oktober 2019

    Afgelopen vrijdag 11 oktober  hebben diverse betrokken specialisten uit ons team de handen ineen geslagen met een van onze opdrachtgevers. Samen met De Monchy International B.V. hebben we meegeda ...

    Bekijk het artikel »
  • Het gebruik van een Photoslider

    Geschreven door: op maandag 7 oktober 2019

    Ze zijn er in alle soorten en maten en staan meestal bovenaan een websitepagina. Dan heb ik het natuurlijk over photosliders. Zo bent u vast bekend met de traditionele foto die langzaam vervaagd en wa ...

    Bekijk het artikel »
Bel 072 5345 888
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg
Op de hoogte blijven?

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