pugAan de slag met pug


Opmerkingen

Pug is een krachtige, robuuste, elegante, veelzijdige sjabloonmotor. Het werd beïnvloed door Haml en geïmplementeerd met JavaScript voor Node.js en browsers. Er zijn implementaties voor Laravel, PHP Scala, Ruby, Python en Java.

Het beschikt over:

Pug was eerder bekend onder de naam Jade, maar is hernoemd vanwege een geregistreerd handelsmerk.

Deze opmerkingsectie moet ook alle grote onderwerpen binnen pug vermelden en een link naar de gerelateerde onderwerpen bevatten. Omdat de documentatie voor pug nieuw is, moet u mogelijk eerste versies van die gerelateerde onderwerpen maken.

versies

Versie Publicatiedatum
2.0.0-beta11 2017/02/04
2.0.0-beta10 2017/01/29
2.0.0-beta9 2017/01/25
2.0.0-beta 1 2016/06/03
1.11.0 2015/06/11

Hallo wereld voorbeeld

Laten we eerst een sjabloon maken om te renderen!

p Hello World, #{name}!
 

Sla dit op in een bestand dat eindigt op de extensie .pug (je kunt het alles noemen wat je maar wilt, maar we gebruiken view.pug in de volgende code om het te compileren).

Het enige dat u nu nog hoeft te doen, is die sjabloon compileren! Maak een JS-scriptbestand (we noemen dat van ons main.js ) en voeg de volgende inhoud toe:

// Import the pug module
const pug = require('pug');

// Compile the template (with the data not yet inserted)
const templateCompiler = pug.compileFile('view.pug');

// Insert your data into the template file
console.log(templateCompiler({ name: 'John' });
 

Wanneer u dit bestand uitvoert met npm main.js , moet u de volgende HTML-code-uitvoer in uw console krijgen:

<p>Hello World, John!</p>
 

Gefeliciteerd, je hebt zojuist je eerste sjabloon gemaakt en gecompileerd! Op naar meer geavanceerde dingen, zoals Conditionals , Iteration en nog veel meer!

Installatie

Ga als volgt te werk om het Pug-sjabloonrenderingssysteem te installeren:

  1. Laat de Node.js-omgeving op uw computer installeren
  2. Voer npm install pug --save op om de pug module in uw huidige project te installeren.

Je kunt nu pug in je project gebruiken via het standaard require mechanisme:

const pug = require("pug");
 

Als u Express in uw toepassing gebruikt, hoeft u dit niet te require("pug") . U moet echter de view engine eigenschap van uw Express-toepassing instellen op pug .

app.set("view engine", "pug");
 

Verder moet u de weergavemap van uw app zo instellen dat Express weet waar te zoeken naar uw Pug-bestanden (voor compilatie).

app.set("views", "path/to/views");
 

Binnen uw Express-route kunt u vervolgens uw Pug-bestanden weergeven door de functie res.render aan te roepen met het pad van het bestand (beginnend vanuit de map die is ingesteld met de optie app.set("views") ).

app.get("/", function (req, res, next) {
    // Your route code
    var locals = {
        title: "Home",
    };
    res.render("index", locals);
});
 

In het bovenstaande views/index.pug index naar een bestand op views/index.pug , en locals vertegenwoordigen een object van variabelen die aan uw bestand zijn blootgesteld. Zoals in latere paragrafen zal worden uitgelegd, kan Pug toegang krijgen tot variabelen die eraan worden doorgegeven en een verscheidenheid aan acties uitvoeren (conditionals, interpolatie, iteratie, en meer).