Pug — это шаблонизатор и html-препроцессор, написанный на javascript для платформы Node.js, с целью ускорения верстки. Это даже быстрее, чем при использовании emmet — так что будет полезен любому веб-разработчику. Тем более, что освоить Pug можно за пару часов, синтаксис достаточно прост и интуитивно понятен.
Создание проекта
Установка Pug
Для установки надо выполнить две команды, вторая должна быть выполнена из директории проекта:
Пробуем на зуб
Создадим в директории src файл index.pug следующего содержания:
Переходим в директорию src и выполняем команду:
Установка Gulp
Как работать с gulp — это тема для отдельной статьи, так что без подробностей.
Создаем файл gulpfile.js с тремя задачами для преобразования pug-файлов и отслеживания изменений.
Наш файл package.json сейчас имеет только три зависимости:
Синтаксис Pug
Синтаксис Pug достаточно прост. Он не имеет угловых скобок и закрывающих тегов. Вложенность элементов определяется отступом — табуляция или пробел. Классы css задаются через точку, идентификаторы — через решетку, атрибуты — в круглых скобках.
1. Теги, классы, идентификаторы
Давайте создадим маркированный список:
Теперь добавим css-классы нашей разметке:
Добавим тегу
еще и идентификатор:
2. Атрибуты элемента
Чтобы указать атрибут элементу — достаточно указать его в круглых скобках:
Если атрибутов много, то можно указать их многострочными линиями:
3. Текст элемента
Результат будет одинаковым:
4. Буферизация и экранирование
5. Вывод переменных
6. Элемент внутри элемента
Давайте разместим изображение внутри параграфа:
Еще один пример — параграф, внутри которого и ссылка:
В Pug можно вставлять содержимое одного файла в другой. Это позволяет выносить в отдельные файлы разметку повторяющихся блоков или миксины. Возьмём два файла, один из которых содержит разметку для head, а второй разметку для footer
Теперь не нужно на каждой странице писать разметку для этих блоков. Достаточно подключить их через include
По итогу получим такой HTML
Не Pug файлы подключаются как текст
Подключим css и js файлы в Pug
В итоге получим таrой HTML
Можно комбинировать фильтры с include, позволяя фильтровать содержимое файлов по мере их включения. Попробуем вставить файл с markdown разметкой
Шаблоны блоки расширения
Pug поддерживает наследование шаблонов. Для этого используют ключевые слова block и extends. Блоки шаблона могут быть заменены в дочернем шаблоне. Блоки в Pug могут содержать контент по умолчанию. В приведенном ниже примере, в макете, определяются block scripts, block content и block foot.
Переопределяя блок можно поместить в него другие блоки. В следующем примере, при переопределении блока content в него были добавлены блоки sidebar и primary
append/prepend
В Pug можно переопределять блоки добавляя в них контент и не удаляя содержимое. Предположим есть скрипты которые должны подключаться на каждой странице. Тогда шаблон будет выглядеть следующим образом
У нас есть страница с Javascript игрой и для неё нужны свои скрипты. С помощью append/prepend можно добавить их не удаляя скрипты из родительского шаблона.
Когда используем append/prepend можно не писать слово block. Вместо block append head достаточно append head.
Частые ошибки в использовании шаблонов
Обратите внимание, что только блоки и определения миксинов могут отображаться на верхнем уровне(без отступа) дочернего шаблона. Это важно! Родительские шаблоны определяют общую структуру данных, а дочерние шаблоны могут только изменять определённые блоки в разметке и логику. Если дочерний шаблон попытается добавить контент вне блока, Pug не будет знать куда поместить его на странице.
Небуферизованный код, который может содержаться в разметке. Если вам нужно определить переменные для использования в дочернем шаблоне, вы можете сделать это несколькими различными способами:
Буферизованные комментарии Pug не могут отображаться на верхнем уровне расширяемого шаблона: они создают комментарии HTML, которые не будут помещаться в получившийся HTML. (Небуферизованные комментарии Pug могут располагаться где угодно.)
Миксины
С помощью миксинов можно создавать переиспользуемые блоки
Миксины могут принимать аргументы
Миксин может принимать блок Pug и действовать в зависимости от содержания
Миксины могут получать не явные attributes аргументы, которые берутся из атрибутов, переданных в миксин.
Можно использовать миксин с &atributes
В миксине можно устанавливать аргументы по умолчанию
Вы можете написать миксины, которые принимают неизвестное количество аргументов, используя синтаксис «rest arguments».
Всем привет! Давно хотел написать хорошую развернутую документацию про Html препроцессор Pug и вот этот момент настал. Я довольно давно использую Pug в своей работе и просто балдею от него . Я не понимаю, как можно сегодня верстать и писать обычный нативный Html-код. Это же так нудно и долго.
Вообще Pug это примерно тоже самое, что и препроцессор Sass. Я имею ввиду тут логику, хотя и сам синтаксис немного похож. Если вы поняли, чем хорош Sass, то Pug вам понравится еще больше.
Pug — это шаблонизатор Html, написанный на языке JavaScript для Node.js. После интерпретации сервером синтаксис Pug превращается в Нtml код. Старое название Pug — Jade. Подробности не знаю, но у разработчика возникли проблемы с авторскими правами и проект был переименован в Pug. Так что, если встретите упоминание Jade, знайте, что речь идет о Pug.
Начало работы
Для того, чтобы работать с Pug вам необходим установить Node.js. Скачать его можно с официального сайта nodejs.org. После установки открываем консоль (в Windows это комбинация клавиш Win + R) и вводим команду:
Дождитесь пока установщик завершит установку. Чтобы проверить, что все прошло удачно введите команду в консоли:
Вам должно выдать последнюю версию Pug, например — 6.13.4.
Далее запускаем еще одну команду:
Если все прошло без ошибок, то можно начинать работу.
Чтобы скомпилировать все это в Html необходимо в консоли перейти в директорию с данным файлом и запустить команду:
В итоге получим в index.html
Синтаксис Pug
Код Pug достаточно прост. Он не имеет угловых скобок и закрывающих тегов. Вложенность элементов определяется отступом — Tab или пробел.
Все это делает код лаконичным и легкочитаемым. И самое главное — ускоряется скорость написания кода.
Как было уже отмечено, синтаксис Pug чем-то напоминает синтаксис Sass:
Это в основном тот список, что нужно знать, чтобы начать работать с Pug. Сюда я бы добавил еще то, что атрибуты указываются в круглых скобках. Давайте теперь по порядку.
Теги, классы, идентификаторы
Давайте напишем небольшую разметку, например маркированный список.
Html
Теперь добавим классы нашей разметке
Html
Добавим тегу ul еще и идентификатор
Html
Если обратили внимание, текст элементу списка задается через пробел. Об этом поговорим более подробнее ниже.
Атрибуты
Для того, чтобы указать атрибут элементу разметки достаточно указать его в круглых скобках.
Html
Если необходимо указать несколько атрибутов, то указываем их через запятую или пробел. Я больше предпочитаю пробел.
Html
Если атрибутов много, то можно указать их многострочными линиями
Если с атрибутами нам необходимо указать класс и/или индификатор, то указываются они до атрибутов.
Класс или Id можно указать также, как обычный атрибут.
Текст
Как было уже сказано, текст элементу указывается через пробел.
Можно указать и через символ | :
Если у вас много текста, например, большой абзац, то есть вариант написать текст, указав точку в конце тега и через отступ вложенностью указываем текст. После точки не должно быть никаких символов и пробелов.
Также можно указывать обычные html теги внутри текста.
Комментарии
Однострочные комментарии начинаются с символов — //
Html
Если не хотите выводить комментарии в итоговом html коде, а в pug-файлах они нужны, то достаточно сразу после слешей добавить дефис.
Также можно выводить и многострочные комментарии.
Html
Doctype
В Html5 doctype указывается следующим образом:
Html
Если вы хотите указать doctype для различных типов документов, то можете почитать более подробно в официальной документации как это сделать.
Подключения (include)
Большим достоинством Pug является возможность подключения отдельных модулей кода. То есть можно выносить в отдельные фрагменты кода целые области сайта. Например, можно вынести отдельно header, sidebar, content, footer и все это собрать в одном индексном файле. Такой подход сделает наш код удобочитаемым и в случае правок достаточно изменить в одном месте.
Html
Как видим код файла index.pug намного удобнее читать и ориентироваться в нем.
Также есть возможность подключать отдельные файлы стилей и скриптов.
Циклы
Циклы или итерации в Pug позволяют выполнять какие-то множественные операции, написав всего лишь несколько строк кода. Например, можно вывести список пунктов меню, написав код итерации следующим образом:
Html
Есть возможность также перебрать ключи в объекте.
Html
Вместо each вы можете использовать for в качестве псевдонима.
Html
Как видим, циклы это обычный JavaScript и ничего сложного тут нет, хватает всего лишь знаний основ данного языка программирования.
Миксины
Миксины позволяют создавать многократно повторяемые блоки кода. Это практически тоже самое, что и функция в языке программирования.
Как видим, чтобы вызвать миксин необходимо поставить символ + и без пробела написать название миксина. Если код миксина выносится в отдельный файл, то в том документе, где он вызывается необходимо его подключить через include в верхней части документа.
Аргументы
Миксин может принимать также и аргументы.
У нас есть также возможность установить значения аргументов по умолчанию. Делается это примерно также, как и установка параметров функции по умолчанию в ES6 (ECMAScript 6).
Блоки миксинов
Миксины могут выступать в качестве блоков или контейнеров, которые могут содержать различный контент.
Атрибуты
Помимо аргументов миксины также могут принимать и атрибуты.
А вот так можно вывести произвольное количество атрибутов:
Неизвестное количество аргументов
В миксинах Pug есть возможность передавать неизвестное количество аргументов, используя синтаксис «rest arguments«.
Наследование шаблонов
Pug позволяет создавать шаблоны страниц, то есть в последующем любую страницу сайта можно создать по заранее созданному шаблону. Таких шаблонов может быть сколько угодно.
Шаблон Pug
Страницы Pug
Из примера выше видим, что страницы «Главная» и «О нас» сделаны по одному шаблону. Ориентироваться в коде на таких страницах намного проще, ведь здесь только основное его содержимое.
Содержимое блока полностью заменяется дочерним шаблоном, но что, если нам необходимо просто добавить что-либо к содержимому по умолчанию?
Block append / prepend
block prepend — добавляет в начало списка, block append — в конец списка. Вообще слово block можно опустить, например — append scripts. Он является не обязательным.
Вообще следует отметить, что создание шаблонов — это мощная функция, которая позволяет разделять наш проект на простые и сложные конструкции страниц. Так что пользуйтесь данной возможностью.
Условия
Pug работает на основе JavaScript поэтому есть возможность использовать условия при написании кода, как и в любом другом языке программирования.
Интерполяция
В Pug существует несколько видов вывода переменных. Давайте обратимся к примеру.
Более подробнее про вывод переменных можете почитать в документации.
Конструкция Case
Можно записать данный код более компактно.
Pug позволяет использовать встроенный JavaScript код в ваших шаблонах. Существует 3 вида кода: небуферизированный, буферизированный и неэкранированный буферизированный.
Небуферизированный код
Небуферизированный код можно указать и как блок.
Буферизированный код
Неэкранированный буферизированный код
Фуф… Не маленькая получилась статья. На этом скорее всего завершу. Пока писал данную документацию сам узнал много чего новенького .
На этом все… Все спасибо за терпение (если дочитали до конца ). Пишите комменты, с удовольствием отвечу на вопросы. До встречи в других постах!
В Pug нет закрывающих тегов, вместо этого он использует строгую табуляцию (или отступы) для определения вложености тегов. Для закрытия тегов в конце необходимо добавить символ / : foo(bar=’baz’)/
Непосредственно в Pug можно вставлять элементы в HTML синтаксисе
В Pug можно встраивать JavaScript код, благодаря чему возможны конструкции показанные ниже.
Констуркция Switch Case
Pug поддерживает switch case, которая представляет собой более наглядный способ сравнить выражение сразу с несколькими вариантами.
Вставка JavaScript кода
Pug поддерживает вставку частей JavaScript кода в шаблоны.
Буфферизированный код начинается с символа = Pug
Существуют различные комментариев: те, которые будут отображаться после компиляции, и те, которые пропадут.
Pug имеет возможность вставки содержимого одного файла в другой файл Pug.
Pug предоставляет различные способы вывода переменных.
Поддержка миксинов позволяет создавать переиспользуемые блоки.
Многострочный ассоциативный массив
R0NS0N commented Oct 2, 2018
Дякую. коротко і те що потрібно.
nerlihmax commented Oct 8, 2018
Спасибо, очень информативно! Не хватает лишь информации от том, как использовать аргументы из функции рендера, если таковая используется.
AlexeyRomanchenko commented Oct 20, 2018 •
neretin-trike commented Oct 28, 2018
Если я правильно тебя понял, то может быть такое решение:
Mikkou commented Nov 8, 2018
спасибо, коротко и ясно)
warezorwar commented Feb 28, 2019
sh4rov commented Jun 21, 2019
Petrivah commented Aug 5, 2019
Буфферизированный- тот который выводится Не Буфферизированный- тот который Не выводится
webitall2019 commented Sep 24, 2019
Хороший туториал! спс
Mike2142 commented Nov 4, 2019 •
Очень полезная статья, спасибо!
badunius commented Nov 12, 2019
ситуация, нужно закомментировать один из элементов, находящийся на одном уровне с другими
комментирует 2 и 3
ImLoaD commented Nov 27, 2019 •
В человечьем PUG это делается вроде вот так
Warlock-9000 commented Dec 27, 2019
zzaq17 commented Feb 9, 2020 •
Благодарю) всё понятно и с примерами
Появился вопрос с meta блоками в head. Кто-нибудь сталкивался? Ошибка в gulp: Message: Unexpected token (8:8) Details: pos: 558 loc: [object Object] raisedAt: 559 domainThrown: true
Часть кода шаблона:
Часть кода для страницы:
Пробовал и #<>, и всё что нашёл в туториал, и просто название переменной. Но ничего не помогает. Как всё-таки добавить интерполяцию?
В этой статье мы разберём HTML препроцессор PUG, который как правило используется для создания шаблонов, когда разрабатываете приложение на Node.js и Express.js, поэтому всем кто использует это, обязательно к прочтению.
Также если вам интересна шаблонизация для Node.js или Express.js, то почитайте часть учебника по Express.js «Express.js шаблонизатор Handlebars», тоже будет крайне интересно.
Как установить PUG:
Первым делом его нужно скачать, для этого нужно использовать NPM, вот какую команду нужно использовать:
Но если вы используете последнюю, то тогда вам подойдёт вот эта команда:
То есть всё как обычно.
Работа с HTML препроцессор PUG:
Для начала разберём на мой взгляд главную особенность PUG, а заключается она в том, что вам не обязательно использовать полноценные теги, вам достаточно будет использовать их название, и если вам надо вставить строку, то просто вставляете её через пробел, если блок, то вставляете его с отступами.
Вот не большой пример этого:
Как видите, мы тут сделали заголовок H1 и H3, также создали список UL, и как можете заметить, чтобы внутри блока создать ещё один тег, достаточно просто сделать отступы в четыре пробела.
. Я не понимаю, как можно сегодня верстать и писать обычный нативный Html-код. Это же так нудно и долго.
.
