Pug вывести html переменную

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

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

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

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

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

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

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

Источник

Передача переменной в функцию Pug / Jade Tag Interpolation

Цитата официальной страницы мопса относительно интерполяции тегов:

Интерполяция работает не только для значений JavaScript, но и для Pug. Вы можете сделать то же самое, написав HTML-тэг, встроенный в ваш Pug… но тогда какой смысл писать Pug? Оберните встроенное объявление тега Pug в # [and] , и оно будет оценено и помещено в содержимое содержащего его тега.

Проще говоря, я извлекаю из этого то, что я могу оценивать язык мопса из всего, что помещаю в #[] .

И это действительно поведение. Пример:

Однако я хочу иметь возможность передавать переменную в интерполяционную часть, например так:

(не работает):

Я думаю, может быть, мне нужно сделать какое-то преобразование типов? typeof x показывает, что переменная является числом, но Number(john) просто заставил переменную вернуть NaN .

Как передать переменную в #[x] , которая действительно будет работать?

2 ответа

Синтаксис для функции интерполяции тегов Pug требует определения тега.

Пример 1

Оба из которых составляют

Пример 2

В том же смысле это:

Оба из которых составляют

Независимо от того, является ли myName предварительно определенной переменной javascript.

Пример 3

Правильное использование встроенной интерполяции тегов выглядит следующим образом:

Который компилируется в:

Его целью является более семантическое размещение встроенных тегов в Pug.

Пример 4

Если вы хотите вывести переменную в виде строки, используйте обычную интерполяцию строки :

Пример 5

Если вы хотите использовать встроенную интерполяцию тегов с обычной строковой интерполяцией переменных, вы можете сделать это тоже:

Но вам нужно указать, какой тег используется (в данном случае span )

Пример 6

Если вам нужно, вы также можете сделать это имя динамическим:

Надеюсь это поможет.

Мне тоже было интересно, как этого добиться.

Как получить следующий результат?

Я смотрел на Пример 5 в принятом ответе, который использует $<> в качестве интерполяции строк, но, похоже, это не сработало с последним мопсом на момент написания (2.0.4). Может быть, этот пример для Джейд ака мопс v1?

Синтаксис, который работал для меня, заключался в использовании #<> следующим образом:

Источник

Html шаблонизатор Pug, документация на русском

Всем привет! Давно хотел написать хорошую развернутую документацию про Html препроцессор Pug и вот этот момент настал. Я довольно давно использую Pug в своей работе и просто балдею от него . Я не понимаю, как можно сегодня верстать и писать обычный нативный Html-код. Это же так нудно и долго.

Вообще Pug это примерно тоже самое, что и препроцессор Sass. Я имею ввиду тут логику, хотя и сам синтаксис немного похож. Если вы поняли, чем хорош Sass, то Pug вам понравится еще больше.

Pug — это шаблонизатор Html, написанный на языке JavaScript для Node.js. После интерпретации сервером синтаксис Pug превращается в Нtml код. Старое название Pug — Jade. Подробности не знаю, но у разработчика возникли проблемы с авторскими правами и проект был переименован в Pug. Так что, если встретите упоминание Jade, знайте, что речь идет о Pug.

Начало работы

Для того, чтобы работать с Pug вам необходим установить Node.js. Скачать его можно с официального сайта nodejs.org. После установки открываем консоль (в Windows это комбинация клавиш Win + R) и вводим команду:

Дождитесь пока установщик завершит установку. Чтобы проверить, что все прошло удачно введите команду в консоли:

Вам должно выдать последнюю версию Pug, например — 6.13.4.

Далее запускаем еще одну команду:

Если все прошло без ошибок, то можно начинать работу.

Теперь, чтобы начать создайте файл с расширением .pug , например, index.pug с классическим содержанием Hello, World:

Чтобы скомпилировать все это в Html необходимо в консоли перейти в директорию с данным файлом и запустить команду:

После выполнения в этой же директории должен появиться файл index.html. Если откроем исходный код, то увидим, что весь код идет в одну строку и читать такой код довольно трудно. Чтобы исправить ситуацию запустим компиляцию Html с флагом —pretty (перед командой двойной дефис).

В итоге получим в index.html

Можно также указать еще один флаг -w , для слежки за изменениями в файлах *.pug.

Вообще вы можете запустить команду pug —help , чтобы посмотреть все доступные флаги и их сокращения.

Вообще хотелось бы отметить, что вряд ли кто-то использует данные команды в своей работе. Для того, чтобы комфортно работать с Pug используют таск-менеджеры, например Gulp + плагин gulp-pug . Но это отдельная тема для разговора. А мы давайте по подробнее разберем синтаксис pug.

Синтаксис Pug

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

Все это делает код лаконичным и легкочитаемым. И самое главное — ускоряется скорость написания кода.

Как было уже отмечено, синтаксис Pug чем-то напоминает синтаксис Sass:

• Вложенность определяется отступом (Tab или пробел)
• Классы задаются через точку (.)
• Id задаются через решетку (#)
• Однострочные комментарии задаются через //

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

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

Давайте напишем небольшую разметку, например маркированный список.

Html

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

Html

Добавим тегу ul еще и индификатор

Html

Если обратили внимание, текст элементу списка задается через пробел. Об этом поговорим более подробнее ниже.

Атрибуты

Для того, чтобы указать атрибут элементу разметки достаточно указать его в круглых скобках.

Html

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

Html

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

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

Класс или Id можно указать также, как обычный атрибут.

Текст

Как было уже сказано, текст элементу указывается через пробел.

Можно указать и через символ | :

Если у вас много текста, например, большой абзац, то есть вариант написать текст, указав точку в конце тега и через отступ вложенностью указываем текст. После точки не должно быть никаких символов и пробелов.

Также можно указывать обычные html теги внутри текста.

Комментарии

Однострочные комментарии начинаются с символов — //

Html

Если не хотите выводить комментарии в итоговом html коде, а в pug-файлах они нужны, то достаточно сразу после слешей добавить дефис.

Также можно выводить и многострочные комментарии.

Html

Doctype

В Html5 doctype указывается следующим образом:

Html

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

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

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

Html

Как видим код файла index.pug намного удобнее читать и ориентироваться в нем.

Также есть возможность подключать отдельные файлы стилей и скриптов.

Циклы

Циклы или итерации в Pug позволяют выполнять какие-то множественные операции, написав всего лишь несколько строк кода. Например, можно вывести список пунктов меню, написав код итерации следующим образом:

Html

Есть возможность также перебрать ключи в объекте.

Html

Вместо each вы можете использовать for в качестве псевдонима.

Как написано в документации, Pug поддерживает 2 основных вида итераций — это each и while . Each мы рассмотрели, теперь давайте посмотрим на while .

Html

Как видим, циклы это обычный JavaScript и ничего сложного тут нет, хватает всего лишь знаний основ данного языка программирования.

Миксины

Миксины позволяют создавать многократно повторяемые блоки кода. Это практически тоже самое, что и функция в языке программирования.

Объявление миксина начинается с ключевого слова mixin , затем через пробел название миксина.

Как видим, чтобы вызвать миксин необходимо поставить символ + и без пробела написать название миксина. Если код миксина выносится в отдельный файл, то в том документе, где он вызывается необходимо его подключить через include в верхней части документа.

Аргументы

Миксин может принимать также и аргументы.

У нас есть также возможность установить значения аргументов по умолчанию. Делается это примерно также, как и установка параметров функции по умолчанию в ES6 (ECMAScript 6).

Блоки миксинов

Миксины могут выступать в качестве блоков или контейнеров, которые могут содержать различный контент.

Атрибуты

Помимо аргументов миксины также могут принимать и атрибуты.

Обратите внимание, что атрибуты выводятся через символ != . Дело в том, что спец. символы экранируются автоматически и чтобы избежать повторного экранирования мы используем знак != . Если вы не хотите экранировать символы, то используйте символ = . Наиболее подробнее об этом можете почитать в документации.

Неизвестное количество аргументов

В миксинах Pug есть возможность передавать неизвестное количество аргументов, используя синтаксис «rest arguments«.

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

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

Шаблон Pug

Страницы Pug

Наследование шаблона происходит через ключевое слово extends , далее через пробел указываем относительный путь до файла шаблона. Расширение файла *.pug указывать не обязательно, Pug подставит его сам.

Области в которых нам необходимо вывести содержимое обозначаются словом block с указанием имени блока через пробел, например, block head . Содержимое блока на страницах заменяется дочерним шаблоном. Этот процесс является рекурсивным.

Из примера выше видим, что страницы «Главная» и «О нас» сделаны по одному шаблону. Ориентироваться в коде на таких страницах намного проще, ведь здесь только основное его содержимое.

Содержимое блока в шаблоне может быть и по умолчанию, но это не обязательно. Например, в шаблоне выше у нас существуют блоки scripts и footer с содержимым по умолчанию. На созданных страницах мы их не выводили, так как их содержимое выведется по умолчанию. Если не нужен контент по умолчанию, то оставляем блок просто пустым, например block footer .

Содержимое блока полностью заменяется дочерним шаблоном, но что, если нам необходимо просто добавить что-либо к содержимому по умолчанию?

Block append / prepend

В примере выше у нас есть блок scripts в секции head , в котором указано подключение библиотеки jquery. Теперь представьте, что на определенной странице нам необходимо подключить еще один скрипт в блоке scripts . Можно поступить следующим образом:

То есть указывать везде заново подключение jquery, но можно поступить проще. Добавить в блок scripts через append или prepend .

block prepend — добавляет в начало списка, block append — в конец списка. Вообще слово block можно опустить, например — append scripts. Он является не обязательным.

Вообще следует отметить, что создание шаблонов — это мощная функция, которая позволяет разделять наш проект на простые и сложные конструкции страниц. Так что пользуйтесь данной возможностью.

Условия

Pug работает на основе JavaScript поэтому есть возможность использовать условия при написании кода, как и в любом другом языке программирования.

Фигурные скобки можно опустить, как и символ — (если вы используете 2-ю версию Pug).

Можно также использовать оператор условного если unless , что является отрицанием if . Следующие условия будут эквивалентны.

Интерполяция

В Pug существует несколько видов вывода переменных. Давайте обратимся к примеру.

Если нужно вывести переменную в строке (например в тексте) я использую вывод # <название_переменной>или ! <название_переменной>, в остальных случаях — =название_переменной .

Более подробнее про вывод переменных можете почитать в документации.

Конструкция Case

Оператор case работает также, как и в JavaScript switch case . Если вы знакомы с этим понятием в JavaScript, то понять вам будет проще. Впрочем, ничего сложного тут нет.

Можно записать данный код более компактно.

Если не хотим ничего выводить, то добавляем небуферизированный оператор break .

Pug позволяет использовать встроенный JavaScript код в ваших шаблонах. Существует 3 вида кода: небуферизированный, буферизированный и неэкранированный буферизированный.

Небуферизированный код

Небуферизированный код ничего не выводит и начинается с символа — .

Небуферизированный код можно указать и как блок.

Буферизированный код

Буферизированный код вычисляет выражение JavaScript и выводит его результат. Начинается он со знака = . В целях безопасности Html код перед выводом экранируется.

Неэкранированный буферизированный код

Неэкранированный буферизированный код также выводит результат выражения JavaScript, но спец. символы он не экранирует. Начинается с символа != . Использование такого кода не безопасно.

Фуф… Не маленькая получилась статья. На этом скорее всего завершу. Пока писал данную документацию сам узнал много чего новенького .

На этом все… Все спасибо за терпение (если дочитали до конца ). Пишите комменты, с удовольствием отвечу на вопросы. До встречи в других постах!

Источник