Html pug что это

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

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

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

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

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

Практика

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

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

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

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

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

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

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

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

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

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

Основы шаблонов

Шаблон — это текстовый файл, определяющий структуру, или внешний вид выходного файла, с предусмотренными позициями, в которые будут помещаться данные при отображении по шаблону (в Express шаблоны также называют представлениями).

Выбор шаблонов Express

В Express можно использовать много движков отображающих шаблонов ( template rendering engines). В этом руководстве для шаблонов будет использован Pug (ранее известный как Jade) . Это наиболее популярный в Node язык шаблонов, который о себе заявляет так: чистый, чувствительный к пробелам синтаксис для написания HTML, на который сильно повлиял Haml.

Разные языки шаблонов используют различные подходы для определения внешнего вида и разметки позиций для данных—некоторые используют HTML для определения внешнего вида, тогда как другие применяют различные форматы разметки, которые затем должны компилироваться в HTML. Pug — второго типа; он использует представление (representation) HTML, в котором первое слово в каждой строке обычно представляет элемент HTML, а отступы в следующих строках применяются, чтобы представить вложенные элементы. Результатом является определение страницы, которое транслируется непосредственно в HTML, и которое, вероятно, более краткое и легче читается.

Примечание: недостаток применения Pug — это чувствительность к отступам и пробелам (если добавить лишний пробел в «плохом» месте, можно получить невразумительный код ошибки). Однако, если ваши шаблоны уже действуют, их очень легко читать и поддерживать.

Конфигурация шаблона

Когда создавался каркас (the skeleton website) веб-сайта LocalLibrary, он был настроен на использование Pug . Можно было заметить, что модуль pug включён в зависимости в файле package.json, и установлен (app.set(. )) как движок представлений в файле app.js. Эта установка показывает,, что движок представлений — pug, и что Express должен искать шаблоны в подкаталоге /views.

// View engine setup. app.set("views", path.join(__dirname, "views")); app.set("view engine", "pug"); 

Если посмотреть содержимое каталога views, можно увидеть файлы с расширением .pug, в которых шаблоны представлений по умолчанию. Это представление для домашней страницы (index.pug) и базовый шаблон (layout.pug), который следует заменить нашим содержимым.

/express-locallibrary-tutorial //the project root /views error.pug index.pug layout.pug

Синтаксис шаблонов

Пример файла шаблона (ниже) демонстрирует многие наиболее полезные черты Pug.

Сначала отметим, что файл отражает структуру типового HTML-файла, причём первое слов в (почти) каждой строке является элементом HTML, а отступы используются, чтобы показать вложенные элементы. Так, например, элемент body находится внутри элемента html , а элементы p (параграфы) — внутри элемента body, и так далее. Невложенные элементы (т.е. индивидуальные параграфы) располагаются в отдельных строках.

doctype html html(lang="en") head title= title script(type='text/javascript'). body h1= title p This is a line with #[em some emphasis] and #[strong strong text] markup. p This line has un-escaped data: ! is emphasised'> and escaped data: # is not emphasised'>. | This line follows on. p= 'Evaluated and escaped expression:' + title // You can add single line JavaScript comments and they are generated to HTML comments //- Introducing a single line JavaScript comment with "//-" ensures the comment isn't rendered to HTML p A line with a link a(href='/catalog/authors') Some link text | and some extra text. #container.col if title p A variable named "title" exists. else p A variable named "title" does not exist. p. Pug is a terse and simple template language with a strong focus on performance and powerful features. h2 Generate a list ul each val in [1, 2, 3, 4, 5] li= val 

Атрибуты элементов определены в скобках после соответствующих элементов. В скобках располагается список пар *имя атрибута=значение,*причём элементы списка разделяются запятой или пробелом. Например:

• script(type=’text/javascript’) , link(rel=’stylesheet’, href=’/stylesheets/style.css’)
• meta(name=’viewport’ content=’width=device-width initial-scale=1′)

Значения всех атрибутов экранируются (т.е. такие символы как » > » заменяются эквивалентными кодами HTML как » >» ) , чтобы предотвратить JavaScript инъекции и межсайтовые атаки.

Если после тэга стоит знак = , следующий текст рассматривается как выражение JavaScript. Например, ниже в первой строке, содержимое тэга h1 будет переменной title (которая определена в файле или передана в шаблон из Express). Во второй строке содержимое параграфа — это текстовая строка, соединённая с переменной title . В каждом из случаев поведение по умолчанию — экранировать строки.

h1= title p= 'Evaluated and escaped expression:' + title 

Если после тэга знак = отсутствует, тогда содержимое рассматривается как обычный текст. Внутри текста можно вставить экранированные или неэкранированные данные, применяя синтаксис #<> и !<> , как показано ниже. В простой текст можно также вставлять «сырой» HTML.

p This is a line with #[em some emphasis] and #[strong strong text] markup. p This line has an un-escaped string: ! is emphasised'>, an escaped string: # is not emphasised'>, and escaped variables: #. 

Примечание: Почти всегда желательно экранировать данные, полученные от пользователей (при помощи синтаксиса #<> ). Данные, которым можно верить (т.е. подсчитанное количество записей, могут быть выведены без экранирования значений.

Можно использовать символ конвейера (‘|‘) в начале строки, чтобы отметить простой текст («plain text»). Например, дополнительный текст, приведённый ниже, будет показан в той же строке, что и предыдущий, но не будет относиться к ссылке.

a(href='http://someurl/') Link text | Plain text 

Pug позволяет выполнять условные операции if , else , else if и unless — пример приведён ниже:

if title p Переменная с именем "title" существует else p Переменной с именем "title" не существует 

Можно также выполнять циклы (итерации), применяя синтаксис each-in или while . Фрагмент кода (ниже) содержит цикл по элементам массива, чтобы показать список элементов (отметим применение ‘li=’ для оценки «val» как переменной). Значение итератора val может быть также передано в шаблон как переменная!

ul each val in [1, 2, 3, 4, 5] li= val 

Синтаксис разрешает также комментарии (которые попадут в результат или нет, по вашему желанию), смеси для создания повторно используемых блоков кода, операторы выбора case, и много другого. Более подробная информация — в документации The Pug docs.

Расширение шаблонов

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

Например, базовый шаблон layout.pug, созданный в каркасе проекта, имеет такой вид:

doctype html html head title= title link(rel='stylesheet', href='/stylesheets/style.css') body block content 

Тэг block применён для отметки разделов контента, которые могут быть заменены в производных шаблона (если блок не переопределяется, будет использования его реализация в базовом классе).

Умолчание для index.pug (созданный для каркаса проекта) показывает, как можно заменить базовый шаблон. Тэг extends идентифицирует базовый шаблон, который следует использовать, а затем мы используем block section_name, чтобы отметить новый контент раздела, который мы заменяем.

extends layout block content h1= title p Welcome to # 

Next steps

• Return to Express Tutorial Part 5: Displaying library data.
• Proceed to the next subarticle of part 5: The LocalLibrary base template.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

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. Начало работы. Часть первая из двух

Pug — это шаблонизатор и html-препроцессор, написанный на javascript для платформы Node.js, с целью ускорения верстки. Это даже быстрее, чем при использовании emmet — так что будет полезен любому веб-разработчику. Тем более, что освоить Pug можно за пару часов, синтаксис достаточно прост и интуитивно понятен.

Создание проекта

Давайте создадим директорию project , а внутри нее еще две директории — src и dist . В директории src будут исходники, а в директории dist — готовая сборка. И откроем проект в VS Code — нужно кликнуть по иконке папки project правой кнопкой мыши и выбрать в контекстном меню «Открыть с помощью VS Code».

Установка Pug

Для установки надо выполнить две команды, вторая должна быть выполнена из директории проекта:

> npm install pug-cli --g

> npm install pug --save-dev # из директории проекта

Пробуем на зуб

Создадим в директории src файл index.pug следующего содержания:

html(lang="ru") head meta(charset="utf-8") title= "Pug. Начало работы" body h1 Hello, World!

Переходим в директорию src и выполняем команду:

> pug --pretty index.pug

Чтобы следить за изменениями index.pug — нужно добавить ключ -w :

> pug --pretty -w index.pug

Установка Gulp

Как работать с gulp — это тема для отдельной статьи, так что без подробностей.

> npm install gulp --save-dev # из директории проекта > npm install gulp-pug --save-dev # из директории проекта

Создаем файл gulpfile.js с тремя задачами для преобразования pug-файлов и отслеживания изменений.

const gulp = require('gulp'); const pug = require('gulp-pug'); gulp.task('pug', function ()  return gulp.src('src/*.pug') .pipe(pug(pretty: true>)) .pipe(gulp.dest('dist')); >); gulp.task('watch', function ()  return gulp.watch('src/**/*.pug', gulp.parallel('pug')) >); gulp.task('default', gulp.parallel('watch'));

Наш файл package.json сейчас имеет только три зависимости:

 "devDependencies":  "gulp": "^4.0.2", "gulp-pug": "^5.0.0", "pug": "^3.0.2" > >

Синтаксис Pug

Синтаксис Pug достаточно прост. Он не имеет угловых скобок и закрывающих тегов. Вложенность элементов определяется отступом — табуляция или пробел. Классы css задаются через точку, идентификаторы — через решетку, атрибуты — в круглых скобках.

1. Теги, классы, идентификаторы

Давайте создадим маркированный список:

ul li Значение 1 li Значение 2 li Значение 3

  Значение 1 Значение 2 Значение 3 

Теперь добавим css-классы нашей разметке:

ul.list li.list__item Значение 1 li.list__item Значение 2 li.list__item Значение 3

class="list"> class="list__item">Значение 1 class="list__item">Значение 2 class="list__item">Значение 3 

еще и идентификатор:

ul#items.list li.list__item Значение 1 li.list__item Значение 2 li.list__item Значение 3

id="items" class="list"> class="list__item">Значение 1 class="list__item">Значение 2 class="list__item">Значение 3 

2. Атрибуты элемента

Чтобы указать атрибут элементу — достаточно указать его в круглых скобках:

a(href="#", target="_blank") Ссылка a(href="#" target="_blank") Ссылка

href="#" target="_blank">Ссылка 

Если атрибутов много, то можно указать их многострочными линиями:

input( type='checkbox' name='agreement' checked )

Если с атрибутами необходимо указать класс и/или индификатор, то указываются они до атрибутов.

3. Текст элемента

Текст элементу указывается через пробел, после символа | или после точки . :

p.paragraph Lorem ipsum dolor sit amet, consectetur adipisicing elit.

p.paragraph | Lorem ipsum dolor sit amet, consectetur adipisicing elit.

p.paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Результат будет одинаковым:

class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 

4. Буферизация и экранирование

Текст элементу можно присвоить — это что-то вроде работы с переменными. Как будто содержимое элемента — это переменная и мы присваиваем ей значение. При этом значение сперва вычисляется как javascript-выражение. И еще производится экранизация символов < , >и & .

p.paragraph= 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'

p.paragraph = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'

class="paragraph">Lorem ipsum <em>dolor</em> sit amet, consectetur adipisicing elit. 

Чтобы избежать экранирования, надо использовать != :

p.paragraph!= 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'

p.paragraph != 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'

class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 

5. Вывод переменных

Есть два способа вывести значение переменной — с экранированием символов < , >, & и без экранирования.

- var content = 'ipsum dolor sit amet' p.paragraph Lorem #content>, consectetur adipisicing elit. p.paragraph Lorem !content>, consectetur adipisicing elit.

class="paragraph">Lorem ipsum <em>dolor sit</em> amet, consectetur adipisicing elit. class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 

6. Элемент внутри элемента

Давайте разместим изображение внутри параграфа:

p.paragraph: img.image(src="picture.jpg" alt="Изображение")

class="paragraph">class="image" src="picture.jpg" alt="Изображение"/> 

Еще один пример — параграф, внутри которого и ссылка:

p Lorem ipsum dolor sit amet, consectetur #[a.link(href="page.html") adipisicing] elit.

 Lorem ipsum dolor sit amet, consectetur class="link" href="page.html">adipisicing elit. 

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

Однострочный комментарий начинается с символов // — такой комментарий будет виден в итоговом html-коде. Чтобы комментарий не попал в итоговый html-код — он должен начинаться с символов //- .

// Этот комментарий виден в итоговом html-коде p.paragraph Lorem ipsum dolor sit amet, consectetur adipisicing elit. //- Этот комментарий будет удален из html-кода p.paragraph: img.image(src="picture.jpg" alt="Изображение")

 class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. class="paragraph">class="image" src="picture.jpg" alt="Изображение"/> 

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

Большим достоинством Pug является возможность подключения отдельных фрагментов кода. То есть можно выносить в отдельные фрагменты кода целые области сайта. Например, вынести в отдельные файлы header , sidebar , content , footer и все это собрать в одном индексном файле.

// файл index.pug doctype html html(lang="ru") head meta(charset="utf-8") title Подключения (include) body include ./parts/header.pug include ./parts/content.pug include ./parts/footer.pug 

// файл parts/header.pug header Это шапка сайта

// файл parts/content.pug div.content main Это основной контент сайта aside Это контент сайдбара сайта

// файл parts/footer.pug footer Это подвал сайта

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

  lang="ru"> charset="utf-8"> Подключения (include)   Это шапка сайта  class="content"> Это основной контент сайта Это контент сайдбара сайта   Это подвал сайта  

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

Наследование шаблонов работает через ключевые слова block и extend . В родительском шаблоне block — это просто заглушка, которая «резервирует» место. Дочерний шаблон на это «зарезервированное» место вставляет какой-то контент. При этом block в родительском шаблоне может иметь контент по умолчанию. А дочерний шаблон может либо заместить ( replace ) этот контент, либо дополнить его — append и prepend .

Родительский шаблон layout.pug :

block variables - var title = 'Это мой сайт' - var head1 = 'Это заголовок по умолчанию' - var content = 'Это контент страницы по умолчанию' doctype html html(lang="ru") head title #title> block scripts script(src='/js/jquery.js') body block header header Это шапка сайта block content main h1 #head1> div.content p #content> block footer footer Это подвал сайта

Дочерний шаблон contact.pug :

extends layout.pug // этот блок будет замещен (replace) block variables - var title = 'Контакты' - var head1 = 'Контактная информация' - var content = 'Контактная информация: адрес, почта, телефон' // этот блок будет дополнен (append) block append scripts script(src='/js/script.js') // этот блок будет дополнен (prepend) block prepend content // Этот комментарий будет добавлен на страницу в самое начало блока

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

 lang="ru">  Контакты src="/js/jquery.js">  src="/js/script.js">    Это шапка сайта   Контактная информация class="content"> Контактная информация: адрес, почта, телефон   Это подвал сайта  

• Pug. Начало работы. Часть вторая из двух
• CSS-переходы и CSS-анимации
• DOM, часть 4 из 4. Атрибуты и свойства
• DOM, часть 3 из 3. Поиск элементов
• DOM, часть 2 из 3. Изменение документа
• Браузерные события, часть 5 из 5. Генерация пользовательских событий
• Браузерные события, часть 4 из 5. Действие браузера по умолчанию

Каталог оборудования

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Производители

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Функциональные группы

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Категории блога
Облако тегов

• 1С:Предприятие (31)
• API (29)
• Bash (43)
• CLI (122)
• CMS (139)
• CSS (50)
• Frontend (75)
• HTML (66)
• JavaScript (150)
• Laravel (72)
• Linux (169)
• MySQL (76)
• PHP (125)
• React.js (66)
• SSH (27)
• Ubuntu (69)
• Web-разработка (509)
• WordPress (73)
• Yii2 (69)
• БазаДанных (95)
• Битрикс (66)
• Блог (29)
• Верстка (43)
• ИнтернетМагаз… (84)
• КаталогТоваров (87)
• Класс (30)
• Клиент (28)
• Ключ (28)
• Команда (87)
• Компонент (60)
• Конфигурация (64)
• Корзина (32)
• ЛокальнаяСеть (32)
• Модуль (34)
• Навигация (31)
• Настройка (141)
• ПанельУправле… (29)
• Плагин (33)
• Пользователь (26)
• Практика (101)
• Сервер (75)
• Событие (27)
• Теория (106)
• Установка (66)
• Файл (51)
• Форма (58)
• Фреймворк (192)
• Функция (36)
• ШаблонСайта (68)