html pug что это

7. Комментарии в коде

8. Подключения (include)

Итоговый файл index.html :

9. Наследование шаблонов

Источник

Практическое применение препроцессора pug

Сейчас мы рассмотрим какие возможности открывает нам препроцессор html pug, рассмотрим структуру проекта с его использованием и практическое применение.

Назначение препроцессора pug

В определённый момент времени у начинающего web разработчика на первое место выходит оптимизация процесса вёрстки, что характеризует его как профессионала своего дела. Одним из таких инструментов являются препроцессоры. В данной статье речь пойдёт о препроцессоре html pug.

Препроцессора pug позволяет расширить язык разметки html новыми функциями, о которых поговорим чуть позже. Сейчас поговорим о механизме как это работает.

Схема работы препроцессора html pug

Браузер работает исключительно с языком html и синтаксис препроцессора pug ему неизвестен. Принцип работы заключается в следующем: мы пишем код в файле с расширением pug на его синтаксисе, далее, с помощью сборщиков, мы переводим файл pug в обычный html. Этот процесс называется компиляция.

Что позволяет делать препроцессор pug

Препроцессор pug доводит обычный html до уровня языка программирования со всеми вытекающими конструкциями (ветвлениями, функциями, переменными, циклами)

Препроцессор pug позволяет:

1. Выносить повторяющиеся блоки и подключать в шаблонах
2. Использовать шаблоны.

Некоторые страницы могут иметь разные шаблоны и чтобы не пришлось повторять один и тот же код от страницы к странице следует выделить шаблоны

3. Минимизировать код за счёт синтаксиса pug
4. Миксины (функции) для повторяющегося функционала

Например для вывода меню с конкретными классами мы можем использовать миксин с параметрами

Применение препроцессора pug (Структура проекта)

Существует две папки:
1. src — разработческая папка. В которой:
— js
— less/sass
— pug

в папке pug мы создаём под папки:
— common (папка с блоками и миксинами)
— templates (шаблоны страниц)
— pages (папка с контентом страниц в которых мы подключаем шаблоны)

2. build — папка итоговой сборки с html, css, js, шрифтами и изображениями

Структура файла шаблона tempalate_main.pug:

Структура файла страницы index.pug:

Содержание файла minin.pug:

Источник

Pug – это не мопс, тогда кто?

Pug – это HTML препроцессор, написанный на JS для работы на платформе Node.js, с одной единственной целью – ускорить верстку. За счет чего верстать станет быстрее?

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

Редактирование текста

Как редактировать текст, если нет закрывающих тегов? Разработчики, проявили милосердие и кое-что оставили для нас – закрывающие и открывающие теги, внутри текста.

Верстаю с препроцессором Pug.

Как записать тип документа.

Создание и вывод переменных.

— var title = » Pug – это не мопс «;
— var who = «Точно не собака.»;
— var what = » шаблонизатор и препроцессор «;

h1= title
p Тогда, кто это? #
p Не кто, а что:

Pug – это не мопс

Тогда, кто это? Точно не собака.

Не кто, а что: шаблонизатор и препроцессор

Переиспользование блоков через миксины.

mixin dog(breed)
li.dog= breed

Однако браузер не поймет то, что мы тут понаписали. Поэтому Pug код сначала нужно скормить компилятору. На компьютере должна быть установлена программа Node.js и редактор кода VS code (необязательно).

Установка Pug

Заключение

Хочу предостеречь тех, кто только начинает изучать HTML. Сначала освойте нативный HTML, а на Pug не обращайте никакого внимания, всему своё время. Использование препроцессоров хорошо работает на разработчиков с опытом – реально сокращает время верстки. Для начинающих, одновременное изучение классического HTML с препроцессорами – вызовет дикий хаос в голове.

Предвижу ваши возражения: «Вам легко говорить, но в 90% вакансиях на верстальщика / front-end разработчика, одним из требований стоит – Pug (бывший Jade)». Конечно же работодатели требуют использование прогрессивных способов верстки. Скажу вам по секрету, что новичков никто не ждет. Если вы новичок, то вам нужно начинать с основ верстки (есть хороший видео-курс по верстке), но никак не с изучения препроцессоров.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

Источник

neretin-trike / pug.md

В 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

Часть кода шаблона:

Часть кода для страницы:

Пробовал и #<>, и всё что нашёл в туториал, и просто название переменной. Но ничего не помогает. Как всё-таки добавить интерполяцию?

Источник

В предыдущей статье мы установили и запустили Gulp

Что такое Pug?

Синтаксис Pug

Отличия от синтаксиса HTML

Для сравнения: слева синтаксис Pug, справа синтаксис HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

header.pug

footer.pug

portfolio.pug

about.pug

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

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

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

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

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

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

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

Краткий, информативный, чистый синтаксис, не нужно следить за закрывающими тегами

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

Источник