Pug

Geschreven door: op zaterdag 24 maart 2018

Leestijd:

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

Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
Aliancys is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd gazellen 2017
Google analytics
partners-logo.jpg
TelefoonE-mail

whitepaper-customer-selfservice-1.png

Bedien uw klanten optimaal met customer selfservice

Download de whitepaper