Шаблонизатор Pug (Jade) — подробное руководство для новичков от А до Я

#pug #pugjs #jade #html #препроцессор #версткаhtml #htmlбыстро

Pug - это html препроцессор, который позволяет писать HTML быстро и гибко, а написанный код становится лаконичным и легко читаемым.

В данном видео мы подробно и по шагам разберем синтаксис Pug, а также его возможности.

Содержание:
00:00 Вступление
00:48 Начало
04:04 Html теги
08:30 Классы и идентификаторы
10:29 Атрибуты тегов
13:30 Вывод текста в тегах
18:12 Комментарии
20:18 Подключения (Includes)
25:04 Циклы (итерации)
31:50 Миксины
44:55 Шаблоны и наследование
55:47 Условия (if - else)
58:31 Конструкция Case
01:01:45 Вывод кода
01:05:03 Вывод переменных в строке (интерполяция)
01:07:00 Концовка

Если вам интересен текстовый вариант данной документации, то можете почитать на моем блоге -

Музыка из видео:

Song: AERØHEAD - HAVEN
Music provided by Vlog No Copyright Music.
Creative Commons - Attribution-ShareAlike 3.0 Unported
--------------------------------------------------------
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
--------------------------------------------------------
Track: Ikson - Alive [Official]
Music provided by Ikson®
--------------------------------------------------------
Song: Justhea - Closer
Music provided by Vlog No Copyright Music.
Creative Commons - Attribution 3.0 Unported

[ZaurmagRu]

Друзья, если есть чем дополнить данное видео / высказать свое мнение / задать вопрос, то добро пожаловать в комментарии. Также, если вам данное видео понравилось и оказалось полезным буду признателен, если поставите Like!

[ГеннадийКепский]

Спасибо за прекрасный обучающий материал!

[OlgaBulgakova-tj]

Отличное видео и объяснение! Всё максимально понятно) Спасибо за ваш труд!

[reginapopova]

спасибо!) и что текстовый вариант тоже есть это супер)

[MegaTesei]

Заур, прекрасное видео! Читал прежде вашу статью, стал применять паг. Материал средней сложности по усвоению, поэтому оставались вопросы по циклам и миксинам, переменным. С выходом данного видео, большая часть вопросов прояснилась. Спасибо, всё супер. В пожелания хотел бы порекомендовать сохранять для зрителей ваши примеры для возможности скачивания, потому что материал требует повторения (экспериментов), это своего рода будет методическое пособие. Сам часто пользуюсь, переодически открываю пройденное, читаю такие методички если возникают вопросы.

[КепридеЛармо]

В дополнение к материалу стоило упомянуть возможность взаимодействия с переменными и функциями контекста (pug_html, pug_mixins, attributes, функция block). Манипуляция с этими переменными и функциями позволяет, к примеру, реализовать отложенный рендеринг фрагментов кода, именованные слоты миксинов с содержимым по умолчанию (аналог block <block_name>), функцию для извлечения пропсов из attributes и все что угодно, на что хватит фантазии. Если этот материал будет полезен, то могу поделиться реализациями с объяснениями действия в отдельном md документе

[funnystreet]

Тег head не влаживается в body, учи семантику