pugKomma igång med mops


Anmärkningar

Pug är en högpresterande, robust, elegant, funktionsrik mallmotor. Det påverkades av Haml och implementerades med JavaScript för Node.js och webbläsare. Implementeringar finns för Laravel, PHP Scala, Ruby, Python och Java.

Den har:

Mops var tidigare känd under Jade- namnet men har fått nytt namn på grund av ett registrerat varumärkesfall.

Det här avsnittet om kommentarer bör också nämna alla stora ämnen inom mops och länka till relaterade ämnen. Eftersom dokumentationen för mops är ny kan du behöva skapa initialversioner av relaterade ämnen.

versioner

Version Utgivningsdatum
2.0.0-beta11 2017/02/04
2.0.0-beta10 2017/01/29
2.0.0-beta9 2017/01/25
2.0.0-beta1 2016/06/03
1.11.0 2015/06/11

Hej världsexempel

Låt oss först skapa en mall som ska återges!

p Hello World, #{name}!
 

Spara detta i en fil som slutar med .pug tillägget (du kan kalla det vad du vill, men vi kommer att använda view.pug i följande kod för att sammanställa det).

Allt som återstår att göra nu är att sammanställa den mallen! Skapa en JS-skriptfil (vi kallar vår main.js ) och lägg till följande innehåll:

// 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' });
 

När du kör den här filen med npm main.js bör du få följande HTML-kodutdata i din konsol:

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

Grattis, du har just skapat och sammanställt din första mall! Vidare till mer avancerade saker, som Conditionals , Iteration och mycket mer!

Installation

Så här installerar du Pug-mallens återgivningssystem:

  1. Har miljön Node.js installerad på din maskin
  2. Kör npm install pug --save att installera pug i ditt aktuella projekt.

Nu kan du använda pug i projektet genom standarden require mekanismen:

const pug = require("pug");
 

Om du använder Express i din ansökan behöver du inte require("pug") . Du måste dock ställa in view engine för din Express-applikation till pug .

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

Vidare måste du ställa in visningskatalogen för din app så att Express vet var du ska leta efter dina Pug-filer (för sammanställning).

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

Inom din Express-rutt kan du sedan återge dina Pug-filer genom att ringa res.render funktionen med filens sökväg (från katalogen som är inställd av app.set("views") ).

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

I det ovanstående pekar index till en fil som finns på views/index.pug , och locals representerar ett objekt med variabler som är exponerade för din fil. Som kommer att förklaras i senare avsnitt, kan Pug komma åt variabler som skickas till den och utföra en mängd olika åtgärder (villkor, interpolering, iteration och mer).