3 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

Отличия от синтаксиса HTML
  1. Вложенность реализуется отступами
  2. Не нужны закрывающие теги
  3. Нет треугольных скобок

Для сравнения: слева синтаксис 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 пишем необходимый код

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector