Перейти к содержанию

Движок Pug

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

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

1
npm install pug --save

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
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: ['[email protected]', '[email protected]'],
        phone: '+1234567890',
    });
});

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

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

1
app.set('view engine', 'pug');

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!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-элементов применяются теги #{выражение}:

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

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

1
2
3
4
5
6
7
8
if emailsVisible
    <h3>Электронные адреса</h3>
    <ul>
        each email in emails
            <li>#{email}</li>
    </ul>
else
    <h3>Электроннный адрес отсутствует</h3>

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

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

4.30.png

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!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:

1
2
3
4
- var n = 0;
ul
  while n < 4
    li= n++

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

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

Комментарии