Что такое Мопс?
Ранее известный как Jade, Pug — это механизм шаблонов для Node/Express. Это позволяет вам писать динамический HTML, который преобразуется в обычный HTML. В pug при определении вашего HTML вам не нужно использовать закрывающие теги. Вы указываете только открывающую. Как только файл будет преобразован в обычный HTML, он создаст для вас открывающий и закрывающий теги.
Знакомство с мопсом
Мопс можно установить через npm
Общий процесс рендеринга Pug прост. pug.compile() скомпилирует исходный код Pug в функцию JavaScript, которая принимает объект данных (называемый locals) в качестве аргумента. Вызовите эту результирующую функцию с вашими данными, она вернет строку HTML, отображаемую с вашими данными.
Скомпилированную функцию можно повторно использовать и вызывать с разными наборами данных.
Pug также предоставляет семейство функций pug.render(), которые объединяют компиляцию и рендеринг в один шаг. Однако функция шаблона будет перекомпилироваться каждый раз при вызове render, что может повлиять на производительность. В качестве альтернативы вы можете использовать опцию cache с render, которая автоматически сохранит скомпилированную функцию во внутреннем кеше.
Чтобы использовать Мопса в экспрессе:
После его установки обязательно попросите Express установить Pug в качестве предпочитаемого шаблонизатора следующим образом:
При желании вы можете указать, где искать ваши файлы pug. Местом по умолчанию для них, скорее всего, является папка с названием «представления». Вы должны специально проинструктировать экспресс: «У меня они в другой папке».
Мопс с экспрессом
Pug полностью интегрируется с Express, популярной веб-платформой Node.js, в качестве поддерживаемого механизма просмотра. Ознакомьтесь с отличным руководством Express по интеграции Pug с Express.
Pug поставляется с компилятором под названием pug-cli, который доступен в npm, и вы можете установить его глобально, используя
Скомпилировать и запустить
в приведенной выше команде параметр -w означает просмотр, точка указывает Pug, что он должен следить за всем, что находится в текущем каталоге, -o ./html указывает, что Pug должен выводить свой HTML-код в каталог html, а параметр -P улучшает вывод.
Атрибуты
Атрибуты тегов похожи на HTML (с необязательными запятыми), но их значения — это обычный JavaScript.
Скомпилированный вывод:
В Pug есть много других типов атрибутов. Вы можете ознакомиться с ними здесь
Случай
Оператор case является сокращением оператора switch в JavaScript. Он принимает следующий вид:
Скомпилированный вывод:
Вы можете изучить другие варианты Case here.
Код JavaScript
Pug позволяет вам писать встроенный код JavaScript в ваши шаблоны. Существует три типа кода: небуферизованный, буферизованный и неэкранированный буферизованный.
Небуферизованный код
Вывод:
В Pug доступно много других типов кода. Вы можете найти это здесь"
Комментарии
Вывод:
Есть много других типов комментариев. Вы можете изучить его здесь.
Условные
Первоклассный условный синтаксис Pug допускает необязательные круглые скобки.
Вывод:
Вы можете узнать больше об условных выражениях здесь.
тип документа
Вывод:
В Pug доступно множество вариантов doctype. Вы можете узнать больше о типах документов здесь.
Фильтры
Фильтры позволяют использовать другие языки в шаблонах Pug. В качестве входных данных они принимают блок обычного текста.
Чтобы передать фильтру параметры, добавьте их в круглых скобках после имени фильтра (так же, как вы сделали бы с атрибутами тега): :less(ieCompat=false).
Все модули JSTTransformer можно использовать в качестве фильтров Pug. К популярным фильтрам относятся :babel, :uglify-js, :scss и :markdown-it. Ознакомьтесь с документацией по JSTTransformer, чтобы узнать о параметрах, поддерживаемых для конкретного фильтра.
Если вы не можете найти подходящий фильтр для своего варианта использования, вы можете написать свой собственный пользовательский фильтр.
Например, если вы хотите иметь возможность использовать CoffeeScript и Markdown (используя средство визуализации Markdown-it) в своем шаблоне Pug, вы должны сначала убедиться, что эти функции установлены:
Теперь вы должны быть в состоянии отобразить следующий шаблон:
Вывод:
Предупреждение
Фильтры отображаются во время компиляции. Это делает их быстрыми, но это также означает, что они не могут поддерживать динамическое содержимое или параметры.
По умолчанию компиляция в браузере не имеет доступа к фильтрам на основе JSTransformer, за исключением случаев, когда модули JSTransformer явно упакованы и доступны через платформу CommonJS (такую как Browserify или Webpack). Фактически, страница, которую вы сейчас читаете, использует Browserify, чтобы сделать фильтры доступными в браузере.
Шаблоны, предварительно скомпилированные на сервере, не имеют этого ограничения.
Подробнее о фильтрах можно узнать здесь.
Включает
Включения позволяют вставлять содержимое одного файла Pug в другой.
Вывод:
В Pug доступны и другие типы включений. Вы можете изучить его здесь.
Интерполяция
Pug предоставляет операторы для различных интерполяционных нужд.
Вывод:
В Pug больше типов интерполяции. Вы можете изучить их Здесь.
Итерация (циклы)
Pug поддерживает два основных метода итерации: each и while.
Вывод:
В приведенном выше примере показана Каждаяитерация. В Pug также доступна итерация while.
Миксины
Миксины позволяют создавать многоразовые блоки Pug. Миксины в Pug работают просто как функция (блок кода, который вы можете использовать повторно)
Вывод:
Миксины компилируются в функции и могут принимать аргументы:
Вывод:
Вы можете узнать больше о миксинах здесь.
Простой текст
Pug предоставляет четыре способа получения простого текста — то есть любого кода или текстового содержимого, которое должно быть в основном необработанным, непосредственно в отображаемом HTML. Они полезны в разных ситуациях.
Простой текст по-прежнему использует тег и строку интерполяция, но первое слово в строке не является тегом Pug. А поскольку обычный текст не экранируется, вы также можете включить буквальный HTML.
Одной из распространенных ловушек здесь является управление пробелами в отображаемом HTML. Мы поговорим об этом в конце этой страницы.
Встроенный в тег
Самый простой способ добавить обычный текст — встроить. Первый термин в строке — это сам тег. Все, что находится после тега и одного пробела, будет текстовым содержимым этого тега. Это наиболее полезно, когда содержимое простого текста короткое (или если вы не возражаете против длинных строк).
Вывод:
Есть много других способов, вы можете написать простой текст, компилируя код Pug в HTML. Вы можете изучить все возможности здесь.
Теги
По умолчанию текст в начале строки (или только после пробела) представляет тег HTML. Теги с отступом вложены друг в друга, создавая древовидную структуру HTML.
Вывод:
Есть и другие замечательные функции, которые предоставляет Pug, такие как встроенный синтаксис для вложенных тегов, самозакрывающиеся тексты и т. д. Вы можете изучить их здесь.
