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

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

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

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

Подключим его в файл 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>

    include footer.pug

</body>
<html>

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

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

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:

<!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:

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, то в данном случае мы определяем для каждого из этих блоков содержимое и это содержимое затем вставляется на место соответствующих блоков на мастер-сраницу.

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

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

Layout¶

Комментарии