Движок Pug

Последнее обновление: 23.11.2023

Pug представляет еще один движок представлений, который мы можем использовать в связке с Express.

Для использования Pug вначале добавим необходимые пакеты с помощью следующей команды:

npm install pug --save

Определим в файле app.js следующий код:

const express = require("express");
 
const app = express();
 
app.set("view engine", "pug");

app.use("/contact", function(request, response){
     
    response.render("contact", {
        title: "Мои контакты",
        emailsVisible: true,
        emails: ["gavgav@mycorp.com", "mioaw@mycorp.com"],
        phone: "+1234567890"
    });
}); 

app.use("/", function(request, response){
     
    response.send("Главная страница");
});
app.listen(3000);

Факически здесь код идентичен тому, что использовался для ранее рассмотренных движков за тем исключением, что в качестве движка представления устанавливается Pug:

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

Затем добавим в папку views в папке проекта новый файл contact.pug:

<!DOCTYPE html>
<html>
<head>
    <title>#{title}</title>
    <meta charset="utf-8" />
</head>
<body>
     
    <h1>#{title} в Pug</h1>
     
    if emailsVisible
        <h3>Электронные адреса</h3>
        <ul>
            each email in emails
                <li>#{email}</li>
        </ul>
    else
        <h3>Электроннный адрес отсутствует</h3>
    <p>Телефон: #{phone}</p>
</body>
<html>

Для работы с переданными данными внутри html-элементов применяются теги #{выражение}:

<p>Телефон: #{phone}</p>

Для определения условных и циклов можно просто размещать их на новой строке:

if emailsVisible
	<h3>Электронные адреса</h3>
	<ul>
		each email in emails
			<li>#{email}</li>
	</ul>
else
	<h3>Электроннный адрес отсутствует</h3>

С помощью отступов определяется, какой код вход в цикл или условную конструкцию. Причем цикл представляет выражение each переменная in массив - при переборе массива в переменную будет помещаться текущий перебираемый объект. Так, в примере выше при переборе массива emails каждый перебираемый объект будет помещаться в переменную email, значение которой затем выводится на страницу.

При обращении по адресу "/contact" приложение сгенерирует веб-страницу:

Движок Pug в Node.js

Причем Pug позволяет сократить определения html-разметки. Так выше приведенный пример мы можем переписать как

<!DOCTYPE html>
<html>
<head>
    <title>#{title}</title>
    <meta charset="utf-8" />
</head>
<body>
     
    h1 #{title} в Pug
     
    if emailsVisible
        h3 Электронные адреса
        ul
            each email in emails
                li=email
    else
        h3 Электроннный адрес отсутствует
    p Телефон: #{phone}
</body>
<html>

То есть нам достаточно поместить на строке название html-элемента и затем можно определять его содержимое. Содержание элементов определяется отступами. Причем в примере выше подобным образом могут быть сокращены элементы body, head, html. То есть факически всю веб-страницу мы можем определить в подобном стиле.

Если html-элемент в качестве содержимого принимает только значение из модели, то можно сократить код так: li=email

Кроме цикла each..in также можно использовать цикл while:

- let n = 0;
ul
  while n < 4
    li= n++

Также можно перебирать сложные объекты:

ul
  each val, index in {1:'one',2:'two',3:'three'}
    li= index + ': ' + val

НазадСодержаниеВперед

Помощь сайту
Помощь сайту
Юмани:
410011174743222
Номер карты:
4048415020898850
Телеграмм