Отличия от синтаксиса HTML
- Вложенность реализуется отступами
- Не нужны закрывающие теги
- Нет треугольных скобок
Для сравнения: слева синтаксис Pug, справа синтаксис HTML
Рассмотрим синтаксис пошагово — редактируем index.pug и смотрим генерируемый index.html
Добавляем корневой элемент html. Пока никакой вложенности нет, поэтому без отступов. Обратите внимание, что атрибуты тегов записываются в круглых скобках. Закрывающие теги не прописываются. Они будут автоматически сгенегированы
Добавляем два основных элемента HTML-страницы — head и body. Так как они должны быть вложены в корневой элемент html, то в строке перед head ставим один отступ Tab и в строке перед body ставим один отступ Tab. Это значит что элементы head и body будут находится внутри корневого элемента html. Опять же никаких закрывающих тегов мы не прописываем
В head добавляем мета-тег кодировки документа. Атрибуты записываем в круглых скобках. Так как мета-тег кодировки должен быть внутри элемента head, то у мета-тега должен быть на один отступ Tab больше, чем у элемента head
Аналогично добавляем мета-тег для адаптивности. Если у тега несколько атрибутов, то записываем их через пробел или через запятую. Так как второй мета-тег должен быть также внутри элемента head, то у второго мета-тега также должен быть на один отступ Tab больше, чем у элемента head
Также в head добавляем тег title для названия страницы и теги link для подключения файлов стилей
Добавим первый элемент в body — тег header. У header на один отступ Tab больше, чем у body, так как он должен быть расположен внутри body
Чтобы добавить класс для header, добавляем название класса через точку после названия тега, аналогично селекторам в файлах стилей CSS
Далее добавляем div с классом container. В Pug если не указывать название тега перед названием класса, то по-умолчанию назначается тег div. Поэтому вместо записи div.container , мы просто указываем название класса как в файлах стилей CSS — .container . Так как container внутри header, то у container на один отступ Tab больше, чем у header
Далее все аналогично — добавим header__flex внутри container, добавим header__logo внутри header__flex.
Теперь мы хотим добавить второй класс для header__logo — добавляем его через точку без пробелов — .header__logo.logo
Если захотим для header__logo добавить еще идентификатор, то запись будет следующей — .header__logo.logo#logo — порядок не имеет значения, так что запись может быть и такой — #logo.header__logo.logo
Добавим 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
Частая задача — в блоке с текстом необходимо определенную часть текста выделить в теги span (strong, i и другие) или сделать ссылкой a
В Pug есть два способа это сделать.
Первый способ — использовать обычные теги HTML — открывающий и закрывающий.
Второй способ — использовать синтаксис Pug — #[tagname text] — знак решётки, затем в квадратных скобках на первом месте имя тега, на втором месте через пробел текст, который будет находится в теге
Javascript файлы подключаем, также как и остальные теги
Но если необходимо добавить javascript код прямо на странице, то используем следующий синтаксис — script. — добавляем точку после имени тега script и на следующей строке с отступом на один больше, чем у тега script пишем необходимый код