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 позволяет сократить определения 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