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

Частичные представления и layout в Pug

Частичные представления

Pug позволяет внедрять одни предствления в другие. Например, определим в проекте в папке views новый файл footer.pug:

1
<footer><p>MyCorp - Copyright © 2017</p></footer>

Подключим его в файл contact.pug:

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

    include footer.pug

</body>
<html>

Для подключения частичного представления применяется директива include, после которой идет путь к подключаемому представлению.

Сам файл приложение остается тем же, что и в прошлой теме:

 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);

4.31.png

Подобным образом можно определить несколько представлений и подключать их в различные места стандартного представления.

Layout

Несколько представлений могут иметь общие блоки интерфейса, например, футер. Что если мы захотим пометь текст в футере? Тогда нам придется менять код во всех представлениях, где футер используется. Это не очень рационально. И в этом случае лучше использовать мастер-страницы или layout, который позволяют определить общие блоки интерфейса для других представлений.

Например, добавим в папку views новый файл layout.pug:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html>
<head>
    block title
    <meta charset="utf-8" />
</head>
<body>
    block content
    include footer.pug
</body>
<html>

С помощью директивы block определяет блок, в который будет вставляться некоторое содержимое. На момент определения этого представления мы не знаем, что это будет за содержимое. Оно будет определяться в других представлениях, которые будут использовать данный layout. И в данном случае определяются два блока с именами title и content.

Также, как в и в любом представлении, мы можем подключать другие представления. В частности, здесь подключается футер из footer.pug, который обычно является общим элементом для большинства страниц веб-сайта.

Теперь определим представление contact.pug, которое будет использовать данный layout:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
extends layout.pug

block title
    <title>#{title}</title>

block content

    <h1>#{title} в Pug</h1>
    if emailsVisible
        <h3>Электронные адреса</h3>
        <ul>
            each email in emails
                <li>#{email}</li>
        </ul>
    else
        <h3>Электронный адрес отсутствует</h3>
    <p>Телефон: #{phone}</p>

Для подключения мастер-страницы в представление применяется директива extends, после которой указывается путь к файлу.

Поскольку на мастер-странице определены два блока title и content, то в данном случае мы определяем для каждого из этих блоков содержимое и это содержимое затем вставляется на место соответствующих блоков на мастер-сраницу.

Комментарии