Движок 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
приложение сгенерирует веб-страницу:
Причем 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