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

  • Overeenkomsten tussen Growth Hacking en UX design

    Geschreven door: op zondag 13 september 2020

    Laten we beginnen met wat Growth hacking is, Growth hacking zijn experimenten voor oplossingen die groeiproblemen moeten oplossen. Dit is een nieuwe marketing aanpak die met name wordt gedreven door d ...

    Bekijk het artikel »
  • B2B SEO en Geoptimaliseerde Afbeeldingen

    Geschreven door: op woensdag 12 augustus 2020

    In een tijd waarin 27% van het koopproces van B2B kopers met eigen online research wordt doorgebracht is het essentieel om een goed vindbare website te hebben. Afbeeldingen kunnen, indien geoptimalise ...

    Bekijk het artikel »
  • Prospects zoeken B2B

    Geschreven door: op woensdag 12 augustus 2020

    Het zoeken van B2B prospects is een uitdaging voor elk bedrijf. Met name kwalitatieve B2B prospects.Door vooraf onderzoek te doen naar bedrijven die voldoen aan je criteria en je marketing hierop aan ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
AOC 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
Op de hoogte blijven?

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