pug Samouczek
Pierwsze kroki z mopsem

Uwagi

Wersje

Instalacja

Aby zainstalować system renderowania szablonu Mops, wykonaj następujące kroki:

1. Zainstaluj środowisko Node.js na swoim komputerze
2. Uruchom npm install pug --save aby zainstalować moduł pug w bieżącym projekcie.

Możesz teraz używać pug w swoim projekcie poprzez standardowy mechanizm require :

const pug = require("pug");

Jeśli używasz Express w swojej aplikacji, nie musisz tego require("pug") . Należy jednak ustawić właściwość view engine aplikacji Express na pug .

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

Ponadto należy ustawić katalog widoku aplikacji, aby Express wiedział, gdzie szukać plików Pug (do kompilacji).

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

W ramach trasy Express możesz następnie renderować pliki Pug, wywołując funkcję res.render ze ścieżką do pliku (zaczynając od katalogu ustawionego przez app.set("views") ).

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

Powyżej index wskazuje na plik znajdujący się w views/index.pug , a locals reprezentuje obiekt zmiennych, które są widoczne dla twojego pliku. Jak zostanie wyjaśnione w dalszych sekcjach, Mops może uzyskiwać dostęp do przekazywanych do niego zmiennych i wykonywać różne działania (warunkowe, interpolacja, iteracja i inne).

Przykład Hello World

Najpierw stwórzmy szablon do renderowania!

p Hello World, #{name}!

Zapisz to w pliku z rozszerzeniem .pug (możesz go nazwać jak chcesz, ale użyjemy view.pug w poniższym kodzie, aby go skompilować).

Teraz pozostaje tylko skompilować ten szablon! Utwórz plik skryptu JS (nazwiemy go main.js ) i dodaj następującą treść:

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

Po uruchomieniu tego pliku z npm main.js powinieneś otrzymać następujący kod HTML w konsoli:

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

Gratulacje, właśnie stworzyłeś i skompilowałeś swój pierwszy szablon! Do bardziej zaawansowanych rzeczy, takich jak warunkowe , iteracja i wiele więcej!