В этой статье мы разберём HTML препроцессор PUG, который как правило используется для создания шаблонов, когда разрабатываете приложение на Node.js и Express.js, поэтому всем кто использует это, обязательно к прочтению.
Также если вам интересна шаблонизация для Node.js или Express.js, то почитайте часть учебника по Express.js «Express.js шаблонизатор Handlebars», тоже будет крайне интересно.
Как установить PUG:
Первым делом его нужно скачать, для этого нужно использовать NPM, вот какую команду нужно использовать:
1 | npm install pug |
Но если вы используете последнюю, то тогда вам подойдёт вот эта команда:
1 | npm install pug-cli -g |
То есть всё как обычно.
Работа с HTML препроцессор PUG:
Для начала разберём на мой взгляд главную особенность PUG, а заключается она в том, что вам не обязательно использовать полноценные теги, вам достаточно будет использовать их название, и если вам надо вставить строку, то просто вставляете её через пробел, если блок, то вставляете его с отступами.
Вот не большой пример этого:
1 2 3 4 | h1 #{title} в Pug h3 Список ul li Пункт |
Как видите, мы тут сделали заголовок H1 и H3, также создали список UL, и как можете заметить, чтобы внутри блока создать ещё один тег, достаточно просто сделать отступы в четыре пробела.
Ещё мы используем конструкцию #{title}, title это переменная которую мы берём из контекста, который мы передаём шаблонизатору, а фигурные скобки со знаком решётка, обозначает что нужно вывести эту переменную.
Но кроме вывода переменных, вы можете использовать условия и циклы, делается это так же просто.
Вот пример с условиями:
1 2 | if visible p Этот текст виден |
То есть, тут всё как в обычных языках программирования, пишем if и после этого условие, и ниже через четыре отступа выводим что мы хотим.
Пример с циклом:
1 2 | each item in arr li=item |
Здесь мы уже используем конструкцию each, item это элемент массива, а arr, это и есть массив из которого мы берём данные.
Ещё вы можете заметить, что тут вместо вывода текста через пробел после названия тега не используется и фигурных скобок для вывода переменной тоже нет, вы можете в PUG использовать такой синтаксис если кроме переменной вы больше нечего не хотите передать в тег.
Также есть ещё цикл while, он работает так же как и в других языках программирования, вот пример:
1 2 3 4 | - var n = 0; ul while n < 4 li= n++ |
Тут вы можете увидеть создание переменной, для этого используем знак «-» и слово var или const, как в JavaScript.
Также есть уже много возможностей у препроцессора PUG, но я решил показать самые основные, но мой взгляд этого достаточно.
Вывод:
В этой статье вы прочитали про HTML препроцессор PUG, но показал я только основы, что я посчитал нужным, если вам этого мало, то почитайте документацию.
Подписываетесь на соц-сети:
Оценка:
Загрузка...