Что такое pug html

Введение — HTML: Препроцессор Pug

Разметка страницы — один из самых мучительных процессов для любого разработчика. Дело не в сложности самой разметки, а в её реализации: открывающие и закрывающие теги, отсутствие разделения шаблона на компоненты, визуальная проблема определения вложенности той или иной секции. Для решения этих проблем были придуманы HTML-препроцессоры — интерпретаторы, которые переводят разметку с собственного языка на язык разметки HTML.

В этом курсе мы изучим популярный препроцессор Pug, с помощью которого научимся:

• Не дублировать разметку.
• Использовать шаблоны.
• Разделять шаблон на блоки и выносить их в отдельные файлы.
• Подключать дополнительные модули для обработки информации в других форматах.
• Использовать JavaScript для добавления логики при работе с шаблоном.
• Работать с условными конструкциями.

Всё это позволит писать поддерживаемый код, который будет автоматически переводиться в обычный HTML.

Практика

Многие из уроков в данном курсе будут иметь практики с возможностью перехода в веб-доступ. Старайтесь не просто выполнять задание, а после успешного прохождения также экспериментируйте с кодом и возможностями, которые вы узнали.

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

Как подготовиться к этому курсу

Pug — препроцессор для HTML, который позволяет расширить функции при работе с версткой, например, добавить возможность импорта файлов друг в друга. Чтобы продуктивно изучить курс, требуются базовые знания верстки:

• Создание структуры HTML документа
• Семантическая верстка
• Базовые теги для верстки элементов (таблицы, формы, заголовки, текст)

Изучить эти темы можно в следующих курсах:

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях:

Pug — шаблонизатор и препроцессор HTML

Добавляем корневой элемент html. Пока никакой вложенности нет, поэтому без отступов. Обратите внимание, что атрибуты тегов записываются в круглых скобках. Закрывающие теги не прописываются. Они будут автоматически сгенегированы

doctype html html(lang="en") 

Добавляем два основных элемента HTML-страницы — head и body. Так как они должны быть вложены в корневой элемент html, то в строке перед head ставим один отступ Tab и в строке перед body ставим один отступ Tab. Это значит что элементы head и body будут находится внутри корневого элемента html. Опять же никаких закрывающих тегов мы не прописываем

doctype html html(lang="en") head body 

В head добавляем мета-тег кодировки документа. Атрибуты записываем в круглых скобках. Так как мета-тег кодировки должен быть внутри элемента head, то у мета-тега должен быть на один отступ Tab больше, чем у элемента head

doctype html html(lang="en") head meta(charset="UTF-8") body 

Аналогично добавляем мета-тег для адаптивности. Если у тега несколько атрибутов, то записываем их через пробел или через запятую. Так как второй мета-тег должен быть также внутри элемента head, то у второго мета-тега также должен быть на один отступ Tab больше, чем у элемента head

doctype html html(lang="en") head meta(charset="UTF-8") meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no") body 

Также в head добавляем тег title для названия страницы и теги link для подключения файлов стилей

doctype html html(lang="en") head meta(charset="UTF-8") meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no") title Pug link(rel="stylesheet", href="css/bootstrap-reboot.min.css") link(rel="stylesheet", href="css/main.css") body 

Добавим первый элемент в body — тег header. У header на один отступ Tab больше, чем у body, так как он должен быть расположен внутри body

doctype html html(lang="en") head meta(charset="UTF-8") meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no") title Pug link(rel="stylesheet", href="css/bootstrap-reboot.min.css") link(rel="stylesheet", href="css/main.css") body header 

Чтобы добавить класс для header, добавляем название класса через точку после названия тега, аналогично селекторам в файлах стилей CSS

doctype html html(lang="en") head meta(charset="UTF-8") meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no") title Pug link(rel="stylesheet", href="css/bootstrap-reboot.min.css") link(rel="stylesheet", href="css/main.css") body header.header 

Далее добавляем div с классом container. В Pug если не указывать название тега перед названием класса, то по-умолчанию назначается тег div. Поэтому вместо записи div.container , мы просто указываем название класса как в файлах стилей CSS — .container . Так как container внутри header, то у container на один отступ Tab больше, чем у header

doctype html html(lang="en") head meta(charset="UTF-8") meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no") title Pug link(rel="stylesheet", href="css/bootstrap-reboot.min.css") link(rel="stylesheet", href="css/main.css") body header.header .container 

Далее все аналогично — добавим header__flex внутри container, добавим header__logo внутри header__flex.

Теперь мы хотим добавить второй класс для header__logo — добавляем его через точку без пробелов — .header__logo.logo

Если захотим для header__logo добавить еще идентификатор, то запись будет следующей — .header__logo.logo#logo — порядок не имеет значения, так что запись может быть и такой — #logo.header__logo.logo

doctype html html(lang="en") head meta(charset="UTF-8") meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no") title Pug link(rel="stylesheet", href="css/bootstrap-reboot.min.css") link(rel="stylesheet", href="css/main.css") body header.header .container .header__flex .header__logo.logo 

Добавим logo__title c текстом. Текст записывается через пробел после названия тега или тега с классом

doctype html html(lang="en") head meta(charset="UTF-8") meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no") title Pug link(rel="stylesheet", href="css/bootstrap-reboot.min.css") link(rel="stylesheet", href="css/main.css") body header.header .container .header__flex .header__logo.logo .logo__title Pug 

         
 
 
 
Pug
 
 
 
 
   

Добавим в header__flex еще тег nav c классом header__nav и внутри него список ul c элементами списка li, которые в свою очередь содержать ссылки a c текстом.

Каждый дочерний элемент должен иметь на один отступ Tab больше, чем родительский. Но есть еще более краткая запись, через двоеточие, которую лучше использовать только для элементов, которые содержат в себе только один дочерний элемент, например li: a(href=»») Home

doctype html html(lang="en") head meta(charset="UTF-8") meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no") title Pug link(rel="stylesheet", href="css/bootstrap-reboot.min.css") link(rel="stylesheet", href="css/main.css") body header.header .container .header__flex .header__logo.logo .logo__title Pug nav.header__nav ul li: a(href="") Home li: a(href="") Portfolio li: a(href="") About 

Первое время рекомендую самостоятельно, пошагово, добавляя по одному элементу в index.pug, смотреть на сгенерированный index.html, чтобы для себя более подробно понять, как из синтаксиса Pug генерируется разметка HTML

Нюансы синтакcиса Pug

Частая задача — в блоке с текстом необходимо определенную часть текста выделить в теги span (strong, i и другие) или сделать ссылкой a

В Pug есть два способа это сделать.

Первый способ — использовать обычные теги HTML — открывающий и закрывающий.

p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ad, ab accusamus. Minima delectus alias atque a, tenetur perspiciatis reiciendis eligendi quaerat. 
Quos pariatur, fugit enim quod eaque, rerum. 

Второй способ — использовать синтаксис Pug — #[tagname text] — знак решётки, затем в квадратных скобках на первом месте имя тега, на втором месте через пробел текст, который будет находится в теге

p Lorem ipsum dolor sit amet, consectetur #[strong adipisicing] elit. Praesentium ad, ab accusamus. #[a(href="") Minima delectus] alias atque a, tenetur perspiciatis reiciendis eligendi quaerat. #[br]Quos pariatur, fugit enim quod eaque, rerum. 

Javascript файлы подключаем, также как и остальные теги

doctype html html(lang="en") head meta(charset="UTF-8") meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no") title Pug link(rel="stylesheet", href="css/bootstrap-reboot.min.css") link(rel="stylesheet", href="css/main.css") body script(src="https://frontips.ru/pug-shablonizator-i-preprocessor-html/js/jquery-3.5.1.min.js") script(src="https://frontips.ru/pug-shablonizator-i-preprocessor-html/js/main.js") 

Но если необходимо добавить javascript код прямо на странице, то используем следующий синтаксис — script. — добавляем точку после имени тега script и на следующей строке с отступом на один больше, чем у тега script пишем необходимый код

doctype html html(lang="en") head meta(charset="UTF-8") meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no") title Pug link(rel="stylesheet", href="css/bootstrap-reboot.min.css") link(rel="stylesheet", href="css/main.css") body script(src="https://frontips.ru/pug-shablonizator-i-preprocessor-html/js/jquery-3.5.1.min.js") script(src="https://frontips.ru/pug-shablonizator-i-preprocessor-html/js/main.js") script. console.log('1') 

Шаблонизатор

Когда верстаем многостраничный сайт, при внесении изменений, например в header, необходимо открыть каждый *.html файл, который содержит header и внести эти изменения в каждом файле.

Чтобы решить данную проблему, выделим общий фрагмент кода в отдельный файл и подключим его в шаблон

Предположим, у нас есть макет сайта с тремя страницами, где есть общие блоки header и footer, а блок main будет на каждой странице отличаться.

doctype html html(lang="en") head meta(charset="UTF-8") meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no") title Pug link(rel="stylesheet", href="css/bootstrap-reboot.min.css") link(rel="stylesheet", href="css/main.css") body header.header .container .header__flex .header__logo.logo .logo__title Pug nav.header__nav ul li: a(href="") Home li: a(href="") Portfolio li: a(href="") About main.main .container .main__title Index Page .main__text p Lorem ipsum dolor sit amet, consectetur #[strong adipisicing] elit. Praesentium ad, ab accusamus. #[a(href="") Minima delectus] alias atque a, tenetur perspiciatis reiciendis eligendi quaerat. #[br]Quos pariatur, fugit enim quod eaque, rerum. footer.footer .container .footer__copyright © Pug 2020 

Когда сверстали главную страницу, сохраним блоки header и footer в соответствующие файлы header.pug и footer.pug в отдельную папку includes (создаем там же, где лежит основной файл index.pug)

Отдельная папка includes для общих фрагментов верстки нужна для того, чтобы они не генерировались как отдельные html файлы, а только подключались в шаблоны страниц. Если сохраним их рядом с index.pug, то они будут сгенерированы, как отдельные страницы header.html и footer.html, а это некорректно.

Рядом с файлом index.pug сохраняем только те файлы, которые должны быть сгенерированы, как отдельные страницы. Об этом чуть ниже

header.pug

header.header .container .header__flex .header__logo.logo .logo__title Pug nav.header__nav ul li: a(href="") Home li: a(href="") Portfolio li: a(href="") About 

footer.pug

footer.footer .container .footer__copyright © Pug 2020 

Обратите внимание, что в отдельных файлах header и footer отступы сбрасываются — основные родительские элементы header.header и footer.footer в отдельных файлах не имеют отступа. Это важно при подключении этих файлов в шаблоны.

Подключим эти файлы в index.pug. Для этого используем служебное слово include .

doctype html html(lang="en") head meta(charset="UTF-8") meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no") title Pug link(rel="stylesheet", href="css/bootstrap-reboot.min.css") link(rel="stylesheet", href="css/main.css") body include includes/header main.main .container .main__title Index Page .main__text p Lorem ipsum dolor sit amet, consectetur #[strong adipisicing] elit. Praesentium ad, ab accusamus. #[a(href="") Minima delectus] alias atque a, tenetur perspiciatis reiciendis eligendi quaerat. #[br]Quos pariatur, fugit enim quod eaque, rerum. include includes/footer 

Так как отступы в отдельных файлах header.pug и footer.pug сброшены, то при подключении header.pug через служебное слово include следим, чтобы подключение было именно в том месте, где изначально был header.header , то есть на один отступ Tab больше, чем у body. Тоже самое и с footer.pug

Теперь на основе шаблона index.pug, в этой же папке создадим еще два шаблона — portfolio.pug и about.pug

portfolio.pug

doctype html html(lang="en") head meta(charset="UTF-8") meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no") title Pug link(rel="stylesheet", href="css/bootstrap-reboot.min.css") link(rel="stylesheet", href="css/main.css") body include includes/header main.main .container .main__title Portfolio Page .main__portfolio include includes/footer 

about.pug

doctype html html(lang="en") head meta(charset="UTF-8") meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no") title Pug link(rel="stylesheet", href="css/bootstrap-reboot.min.css") link(rel="stylesheet", href="css/main.css") body include includes/header main.main .container .main__title About Page .main__about Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga laudantium labore eos, nobis accusantium? Totam rem culpa fuga saepe facere. include includes/footer 

Теперь генерируются 3 страницы — index.html, portfolio.html и about.html

При изменении header.pug или footer.pug, эти изменения будут применены сразу на всех трёх страницах

В простом примере польза шаблонизации не ощущается в полной мере, но когда реальный проект состоит более чем из 10 страниц и более 20 общих фрагментов, в которые так или иначе в процессе верстки вносятся изменения, то польза становится намного ощутимей

Возможные проблемы и их решения

В окне командной строки, где запущен Gulp, ошибки выглядят следующим образом

На скриншоте выше выделена наиболее информативная часть, где можно видеть код ошибки (code), информация об ошибке (msg), строка с ошибкой (line), файл с ошибкой (filename)

Основная ошибка — это использование в отступах Пробелы вместо Tab. В документации сказано, что в качестве отступов можно использовать или только Пробелы или только Tab.

Решить эту проблему очень просто. В редакторе кода, в файле index.pug выделяем весь код сочетанием клавиш Ctrl+A и ищем настройку Tab size (в Sublime Text и VS Code справа внизу), нажимаем и выбираем пункт Convert Indentation to Tabs — все отступы конвентируются в Tab

Преимущества верстки с Pug

У Pug много возможностей. Мы разобрали только базовые для ускорения и упрощения процесса верстки, но можем выделить следующие преимущества

1. Краткий, информативный, чистый синтаксис, не нужно следить за закрывающими тегами
2. Разбивка верстки на отдельные фрагменты, подключение этих фрагментов в шаблоны, и изменения в общем фрагменте применяются сразу на всех страницах, где он подключен
3. Сгенерированна верстка является валидной (проверка W3C — Markup Validation Service)

В следующей статье познакомимся и разберем работу со вторым очень полезным инструментом для ускорения верстки и более комфортной работы со стилями — Stylus (препроцессор CSS)

Стоит ли использовать pug(jade)?

Вопрос сугубо дискуссионный. Сам для себя уже ответ имею, хотел услышать альтернативные точки зрения людей из профессии. Лично я не вижу плюсов от использования Pug, он мне напоминает CoffeScript канувший в лету.

Все его плюсы для меня абсолютно не очевидны. Понятный синтаксис — понятен лишь тем, кто его освоил. Так как фронт тесно связан с бэком, сомневаюсь, что программисты с бэка обрадуются увидев незнакомый синтаксис, в то время как классический html знают все. Pug же для них синтаксический сахар, который все равно является лишь надстройкой над html. Многоразовое использование блоков? Ну это делает элементарный инклюд на любом серверном языке, тот же php. Возможно я не до конца разобрался как работает Pug, но меня жутко раздражает, что каждое изменение в структуре html чревато перекомпиляцией всей страницы. Все это замедляет работу. Внесли изменение, перекомпилируем pug.

Объясните в чем его актуальность на данный момент? Спасибо.

• Вопрос задан более трёх лет назад
• 9007 просмотров

6 комментариев

Простой 6 комментариев

я им никогда не пользовался, мне неудобно, полет нормальный.

Единственный плюс для меня — попроще диффы в гите, но в основном работаю без пуга, хоть оно в vuejs и из коробки

Сергей delphinpro @delphinpro
Pug никогда не стоило использовать. Есть нормальные шаблонизаторы.

profesor08 @profesor08

Я его использовал активно на протяжении 2х лет. И ровно столько же уже не использую, т.к настроил IDE таким образом, что никакой gulp и pug мне больше не нужен)) Кстати, лично мне pug пошел во вред и только стал тормозить процесс написания кода.

Советую вам также как можно подробнее изучить свою IDE (надеюсь вы не в sublime text делаете серьезный фронтенд :D) и необходимость в некоторых инструментах отпадет сразу же)

Решения вопроса 0
Ответы на вопрос 7

Мой первый опыт с тогда ещё Jade — это где-то лет 6 назад. И был он, мягко говоря, спорный. Отчасти понравилось, но больше всё-таки нет. Были проблемы, которые многократно перекрывали экономию от укороченного синтаксиса. Я писал где-то на Хабре комментарий на этот счет. В общем, забросил.

Потом несколько раз возвращался и постепенно пришел к выводу, что если наловчиться, то некоторую пользу всё-таки извлечь можно. И важно, что со временем авторы пофиксили некоторые проблемы. Это не значит, что я полюбил Pug, но хотя бы смог использовать его без постоянного раздражения.

Какие именно плюсы? Якобы более чистый код с отступами, отсутствие закрывающих тэгов — это всё ерунда. Может и достоинства, но точно минорные. Главное функционал, полностью отсуствующий в нативном HTML: миксины, автогенерация однотипных блоков, наследование шаблонов. Этого правда не хватает.

Но есть два но.
1. Подобный функционал есть в любом другом шаблонизаторе? Верно. И я посмотрел несколько (нунчаки, slim, haml, дуст). И везде я сталкивался с какими-то раздражающими нюансами или чего-то не хватало. А раз святой грааль не был найден, то я не нашёл для себя аргументов для смены шила на мыло.
2. Мне удобнее решать такие вопросы на фронте. Если вам удобнее делать всё то же самое в PHP — тогда да, выходит, что особого смысла нет.

Курс Шаблонизатор Pug/jade — современный ускоритель для HTML

Pug (jade) — современный шаблонизатор для веб-разметки HTML

Прокачайте свои навыки по HTML, освоив современный инструмент веб-разработки Pug (ранее jade). Умение работать с шаблонизатором может очень пригодится профессиональным фронтэндерам при выполнении заказов и проектов или при найме на работу для выполнения тестовых заданий и соответствия требованиям по списку необходимых навыков.

Шаблонизатор Pug/jade — современный ускоритель для HTML — обучение верстке сайтов

Поделитесь страницей с друзьями

О курсе — Чему Вы научитесь?

Pug — это препроцессор HTML и шаблонизатор, который был написан на JavaScript для Node.js.
Скорость в работе — это один из важнейших факторов. Заказчики и работодатели хотят, чтобы работа была выполнена качественно и быстро. Появляются разные инструменты-ускорители, один из них: Шаблонизатор Pug/jade — современный ускоритель для HTML.

Pug отличается синтаксисом от HTML и позволяет не делать типичных ошибок, которые можно встретить в обычном HTML. При этом Pug значительно ускорит верстку, в том числе за счет многократного использования одних и тех же частей кода. Более того и править такой код в дальнейшем будет намного проще.

Этот курс для веб-разработчиков и всех желающих освоить современный инструмент верстки сайтов. Если вы связываете свою карьеру с web-разработкой, то Pug вам обязательно пригодится!

Чему вы научитесь

• Основам работы с шаблонизатором Pug на реальных примерах
• Научитесь писать вёрстку на шаблонизаторе Pug (jade), создавать независимые блоки кода для импорта и последующей модификации на любые страницы
• Использовать переменные, условия-возможности, также включать расширенный функционал с помощью вложенных страниц, шапки, подвалы, файлы конфигурации и многое-многое другое
• Научитесь использовать шаблон, дополнять его, расширять и т.д.
• Познакомитесь с миксинами, заметно упрощающими однотипное наполнение сайта
• Увидите, как использовать возможности других языков вместе с языком Pug, таких как препроцессоры CSS
• Также узнаете о возможностях языка JavaScript, которые сделали Pug поистине потрясающим инструментом современного фронтенд-разработчика
• Создадите большой макет с разными фишками — переменными, условиями, с подключениями других блоков на сайт, с использованием миксинов, где это было нужно. С использованием конфигурационного файла, дополнения этого файла, изменений и прочих нюансов.

План курса

Программа обучения включает видео уроки по изучению HTML верстки с использованием шаблонизатора Pug (jade). Уроки содержат пошаговые инструкции и практические примеры по веб-разработке. Освойте современный инструмент Pug для эффективной верстки сайтов!