Движок Pug¶

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: ['[email protected]', '[email protected]'],
    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 приложение сгенерирует веб-страницу:

4.30.png

Причем 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:

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

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

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

Движок Pug¶

Комментарии