pug учебник
Начало работы с мопсом

замечания

Версии

Монтаж

Чтобы установить систему рендеринга шаблонов Pug, выполните следующие действия:

1. На вашем компьютере установлена среда Node.js
2. Запустите npm install pug --save чтобы установить модуль pug в ваш текущий проект.

Теперь вы можете использовать pug в вашем проекте через стандарт require механизма:

const pug = require("pug");

Если вы используете Express в своем приложении, вам не нужно require("pug") . Тем не менее, вы должны настроить свойство view engine вашего приложения Express на pug .

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

Кроме того, вы должны установить каталог представления своего приложения, чтобы Express знал, где искать файлы Pug (для компиляции).

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

В рамках своего экспресс-маршрута вы можете отобразить свои файлы Pug, вызвав функцию res.render по пути файла (начиная с каталога, установленного app.set("views") ).

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

В приведенном выше views/index.pug index указывает на файл, расположенный в views/index.pug , а locals представляет объект переменных, которые отображаются в вашем файле. Как будет объяснено в последующих разделах, Pug может обращаться к переданным ему переменным и выполнять различные действия (условные обозначения, интерполяцию, итерацию и т. Д.).

Привет, мир

Сначала создадим шаблон для визуализации!

p Hello World, #{name}!

Сохраните это в файле, заканчивающемся расширением .pug (вы можете называть его чем угодно, но мы будем использовать view.pug в следующем коде для его компиляции).

Все, что осталось сделать, теперь составляет этот шаблон! Создайте файл сценария JS (мы будем называть наш main.js ) и добавим следующий контент:

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

Когда вы запустите этот файл с помощью npm main.js , вы должны получить следующий код HTML-кода в консоли:

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

Поздравляем, вы только что создали и скомпилировали свой первый шаблон! На более продвинутые вещи, такие как условные обозначения , итерация и многое другое!