Препроцессор Pug / Jade

Препроцессор Pug изначально назывался Jade, поэтому теперь можно встретить разные названия с одним и тем же описанием.

Комментарии (Comments)

// однострочный комментарий, преобразуется в html
//- однострочный комментарий pug, не отображается в html

//-
    Блочный комментрарий.
    Не преобразуется в html.
//
    Блочный комментрарий.
    Преобразуется в html.

Условные комментарии

//[if lt IE 9]><html lang="en" class="lt-ie9"><![endif]
//[if lt IE 9]><script src="js/html5.js"></script><![endif]

Доктайп (Doctype)

//- doctype html
<!DOCTYPE html> 

//- doctype xml
<?xml version="1.0" encoding="utf-8" ?>

//- doctype transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//- doctype strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

//- doctype frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

//- doctype 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

//- doctype basic
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

//- doctype mobile
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

//- doctype plist
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">

//- собственный doctype
doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"

При создании собственного доктайпа следует учесть что:

  • тип закрывающих скобок />, > зависит от указанной спецификации XML или HTML
  • если нет возможности использовать слово doctype, но указать его все же хочется, можно воспользоваться специальными опциями. Больше информации на оф сайте pug
    var pug = require('pug');
    
    var source = 'img(src="foo.png")';
    
    pug.render(source);
    // => '<img src="foo.png"/>'
    
    pug.render(source, {doctype: 'xml'});
    // => '<img src="foo.png"></img>'
    
    pug.render(source, {doctype: 'html'});
    // => '<img src="foo.png">'

Тэги (Tags)

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

ul            |   <ul>
  li Item A   |     <li>Item A</li>
  li Item B   |     <li>Item B</li>
  li Item C   |     <li>Item C</li>
              |   </ul>


//- pug знает большинство самозакрывающихся элементов,
//- но если не знает, можно добавить / 
img

svg
  use(xlink:href='img/icons.svg#logo')/

//- для сокращения кода в некоторых случаях можно использовать уплотняющую запись преобразования
a: img

Атрибуты (Attributes)

Для записи id и классов можно использовать короткую запись:

.block Текст            | <div class="block">Текст</div>
span.icon Текст         | <span class="icon">Текст</span>

#block Текст            | <div id="block">Текст</div>
p#chapter Текст         | <p id="chapter">Текст</p>

Атрибуты похожи на html, однако их значения — это обычный JavaScript. Поэтому, если вы вставите туда выражение JS, оно сработает.

a(href='google.com') Google
a(class='button' href='google.com') Google
a(class='button', href='google.com') Google

//- обработка js, присвоение класса в зависимости от переменной
- var authenticated = true
body(class=authenticated ? 'authed' : 'anonim')

//- запись в несколько строк
input(
  type='checkbox'
  name='agreement'
  checked
)

//- не стандартные атрибуты.
//- атрибуты со скобками указываются через , либо обрамляются кавычками
div(class='div-class', (click)='play()')
div(class='div-class' '(click)'='play()')

//- переменные в атрибутах
- var url = 'test.html',
  url_2 = 'https://example.com/'

a(href='/' + url) Текст ссылки
a(href=url_2) Вторая ссылка

//- устаревший синтаксис интерполяции
a(href="/#{url}") Текст ссылки

//- если есть поддержка ES2015
- var btnType = 'info'
- var btnSize = 'lg'

button(type='button' class='btn btn-' + btnType + ' btn-' + btnSize)
button(type='button' class=`btn btn-${btnType} btn-${btnSize}`)

//- чтобы символы не экранировались используется !=
div(escaped="<code>")
div(unescaped!="<code>")

//- стили можно записывать как привычной строкой, так и объектом
a(style="color: 'red', background: 'green'")
a(style={color: 'red', background: 'green'})

//- классы можно записывать как привычной строкой, так и массивом
- var classes = ['foo', 'bar', 'baz']
a(class=classes)

//- атрибут class может быть продублирован
a.bang(class=classes class=['bing'])

//- атрибут также может быть объектом, сопоставляющим значения true и false
- var currentUrl = '/about'
a(class={active: currentUrl === '/'} href='/') Home            | <a href="/">Home</a>
a(class={active: currentUrl === '/about'} href='/about') About | <a class="active" href="/about">About</a>

Логический тип данных

input(type='checkbox' checked)                  |  <input type="checkbox" checked="checked" />
input(type='checkbox' checked=true)             |  <input type="checkbox" checked="checked" />
input(type='checkbox' checked=false)            |  <input type="checkbox" />
input(type='checkbox' checked=true.toString())  |  <input type="checkbox" checked="true" />

//- если указан docktype html, pug использует краткую запись

doctype html                                    |  <!DOCTYPE html>

input(type='checkbox' checked)                  |  <input type="checkbox" checked>
input(type='checkbox' checked=true)             |  <input type="checkbox" checked>
input(type='checkbox' checked=false)            |  <input type="checkbox">
input(type='checkbox' checked=true && 'checked')|  <input type="checkbox" checked="checked">

Запись &attributes

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

div.foo(data-bar="foo")&attributes({'data-foo': 'bar'})  |  <div class="foo" data-bar="foo" data-foo="bar"></div>

- var attributes = {};
- attributes.class = 'baz';
div.foo(data-bar="foo")&attributes(attributes)           |  <div class="foo baz" data-bar="foo"></div>

Case (Case)

Сокращенный вариант JS условия switch.

- var friends = 10
case friends
  when 0
    p you have no friends
  when 1
    p you have a friend
  default
    p you have #{friends} friends

//- как и в js можно пропускать значения
- var friends = 0
case friends
  when 0
  when 1
    p you have very few friends
  default
    p you have #{friends} friends

//- для прерывания условия стоит использовать break
- var friends = 0
case friends
  when 0
    - break
  when 1
    p you have very few friends
  default
    p you have #{friends} friends

//- запись в 1 строку
- var friends = 1
case friends
  when 0: p you have no friends
  when 1: p you have a friend
  default: p you have #{friends} friends

Код (Code)

Пуг позволяет обрабатывать JS код, разделяя его на 3 типа: буферизированный, небуферизированный, неэкранированный буферизированный.

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

//- запись в строку
- for (var x = 0; x < 3; x++)
  li item

//- запись блоком
-
  var list = ["Uno", "Dos", "Tres",
          "Cuatro", "Cinco", "Seis"]
each item in list
  li= item

Буферизированный код начинается с =, он вычисляет JS и выводит результат. Для безопасности html символы экранируются.

p
  = 'This code is <escaped>!'

//- инлайновая запись
p= 'This code is' + ' <escaped>!'

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

p
  != 'This code is <strong>not</strong> escaped!'

//- инлайновая запись
p!= 'This code is' + ' <strong>not</strong> escaped!'

Условия (Conditionals)

Условия if, else if, else

- var user = { description: 'foo bar baz' }
- var authorised = false
#user
  if user.description
    h2.green Description
    p.description= user.description
  else if authorised
    h2.blue Description
    p.description.
      User has no description,
      why not add one...
  else
    h2.red Description
    p.description User has no description

условие unless (отрицательный if)

unless user.isAnonymous
  p You're logged in as #{user.name}

Фильтры (Filters)

Фильтры позволяют использовать другие языки в шаблонах Pug. Все модули JSTransformer могут использоваться в качестве фильтров Pug. Популярные фильтры: :babel, :uglify-js, :scss и :markdown-it.

Можно использовать как уже существующие, так и собственные фильтры.

Для вставки опций в фильтры заключите их в скобки записав после вызова фильтра: :less(ieCompat=false).

Если вы хотите использовать CoffeeScript и Markdown (используя Markdown-it renderer) в шаблоне Pug, сначала убедитесь, что эти функции установлены:

$ npm install --save jstransformer-coffee-script
$ npm install --save jstransformer-markdown-it

Запись условия с фильтрами:

:markdown-it(linkify langPrefix='highlight-')
  # Markdown

  Markdown document with http://links.com and

  ```js
  var codeBlocks;
  ```
script
  :coffee-script
    console.log 'This is coffee script'

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

Инлайновая запись

p
  :markdown-it(inline) **BOLD TEXT**

p.
  In the midst of a large amount of plain
  text, suddenly a wild #[:markdown-it(inline) *Markdown*]
  appeared.

Использование вместе с include

//- index.pug
doctype html
html
  head
    title An Article
  body
    include:markdown-it article.md


# article.md
This is an article written in markdown.

Вложенные фильтры

Фильтры применяются в обратном порядке. 

script
  :cdata-js:babel(presets=['es2015'])
    const myFunc = () => `This is ES2015 in a CD${'ATA'}`;

Пользовательские фильтры

Cобственные фильтры добавляются через опцию filters.

options.filters = {
  'my-own-filter': function (text, options) {
    if (options.addStart) text = 'Start\n' + text;
    if (options.addEnd)   text = text + '\nEnd';
    return text;
  }
};



p
  :my-own-filter(addStart addEnd)
    Filter
    Body

Включения (Includes)

Includes позволяет включать содержимое одного файла в другой. Если подключать не pug файл, то в результат вставится содержимое файла.

//- includes/head.pug
head
  title My Site
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')

//- includes/foot.pug
footer#footer
  p Copyright (c) foobar

//- index.pug
doctype html
html
  include includes/head.pug
  body
    h1 My Site
    p Welcome to my super lame site.
    include includes/foot.pug



//- включения можно комбинировать с фильтрами

//- index.pug
doctype html
html
  head
    title An Article
  body
    include:markdown-it article.md

//- article.md
# article.md
This is an article written in markdown.

Наследование (Inheritance: Extends and Block)

Pug поддерживает шаблонное наследование, реализуемое с помощью ключевых слов block и extends.

block — блоки кода, которые можно перезаписывать. В блок можно включить контент «по умолчанию», тогда он будет доступен на всех страницах к которым подключается, если его не перезапишут принудительно. 

Так выглядит объявление блоков:

//- layout.pug
html
  head
    title My Site - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content
    block foot
      #footer
        p some footer content

Команда extends добавляет данные из основного макета к новой странице.

Так выглядит дополнительный файл к которому подключается основная разметка блоков. Блок scripts перезаписывается, блок content заполняется данными, блок foot остается неизменным:

//- page-a.pug
extends layout.pug

block scripts
  script(src='/jquery.js')
  script(src='/pets.js')

block content
  h1= title
  - var pets = ['cat', 'dog']
  each petName in pets
    include pet.pug


//- pet.pug
p= petName

Block append / prepend

Изменение и расширение данных в блоках.

block name — блок с именем. При размещении на другой странице текста в блоке — значение по умолчанию затрется.

block appends name — добавить к блоку. При размещении на другой странице значение прибавится к значению по умолчанию.

block prepends name — указывает что в этом блоке надо обрабатывать условия appends блока.

//- layout.pug

block vars
 - var text="Базовый текст"

block content
 p #{text}

 Пример изменения текста переменной в блоке

//- page.pug
extends layout.pug

block append vars
  - var text="Измененный текст"

block prepend content
 p #{text}

Интерполяция (Interpolation)

Строковая интерполяция, экранируемая

- var simpletext = "Все, что сказано три раза, становится истиной";
- var numeric = 42;
- var htmlstring = "<span>текст в html тегах</span>";

h1= simpletext 
p The Ultimate Question of Life, the Universe, and Everything: #{numeric}
p Html теги без обработки: #{htmlstring}
p Можно добавлять любые js выражения #{simpletext.toUpperCase()}
p Можно не экранировать фигурные скобки #{'}'}!
p Для отображения конструкции переменной можно использовать экранирование \#{interpolation}
p или заключить в конструкцию повторно #{'#{interpolation}'}

Строковая интерполяция, не экранируемая

p !{simpletext}

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

p. 
  В параграфы текста могут быть встроены интерполяторы тегов pug. Например:
  #[strong жирный текст] или
  #[em текст курсивный] и даже  
  #[q(title="¡Hola Mundo!") теги с атрибутами]

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

p
  | Если при написании параграфа использовать подобный вид интерполяции тегов
  strong жирный текст
  | или
  em курсив
  | слова будут склеиваться, т.к. пробелы удаляются.
p.
  Чтобы пробелы оставались на месте, используйте интерполяцию тегов pug
  #[strong respected] и #[em everybody] 

Итерации (Iteration)

Pug поддерживает основные методы итераций: each, for и while.

each

//- простейшая запись
ul
  each val in [1, 2, 3, 4, 5]
    li= val

//- вывод индекса и значения
ul
  each val, index in ['zero', 'one', 'two']
    li= index + ': ' + val

//- перебор объекта вместо массива
ul
  each val, index in {1:'one',2:'two',3:'three'}
    li= index + ': ' + val

//- в качестве массива может выступать любая js сущность
- var values = [];
ul
  each val in values.length ? values : ['There are no values']
    li= val

//- можно добавить блок else, выводящийся если у массивов или объектов нет каких-либо значений
- var values = [];
ul
  each val in values
    li= val
  else
    li There are no values

for

- for (var x = 0; x < 3; x++)
  li item

while

- var n = 0;
ul
  while n < 4
    li= n++

Миксины (Mixins)

Миксины позволяют создавать повторяющиеся блоки

//- декларация
mixin list
  ul
    li foo
    li bar
    li baz

//- использование
+list
+list

Преобразуются в функции и могут принимать аргументы

mixin pet(name)
  li.pet= name
ul
  +pet('cat')
  +pet('dog')
  +pet('pig')

Миксины могут принимать блоки pug контента, для последующего преобразования

//- если под миксином указан контент, он будет добавлен в позицию block

mixin article(title)
  .article
    .article-wrapper
      h1= title
      if block
        block
      else
        p No content provided

+article('Hello world')

+article('Hello world')
  p This is my
  p Amazing article

Двойные блоки в миксине можно создавать так 

 // initialization
- blocks = {}

mixin set(key)
	- blocks[key] = this.block

// mixin definition
mixin layout
	block
	.main
		if blocks.main
			- blocks.main()
		else
			//- Do nothing
		
	.side
		if blocks.side
			- blocks.side()
		else
			//- Do nothing
	+set('main')
	+set('side')

p first mixin call
+layout
	+set('main')
		p Main
	+set('side')
		p Side

p second mixin call
+layout
	+set('main')
		p new main
	+set('side')
		p Second side 

p third mixin call
+layout
	+set('side')
		p Third side

Миксины могут принимать неявные аргументы, которые берутся из аргументов переданных в миксин

mixin link(href, name)
  //- attributes == {class: "btn"}
  a(class!=attributes.class href=href)= name

+link('/foo', 'foo')(class="btn")

//- по умолчанию значения в атрибутах экранированы, 
//- что бы избежать повторной экранизации используйте !=

Миксины можно использовать с &attributes

mixin link(href, name)
  a(href=href)&attributes(attributes)= name

+link('/foo', 'foo')(class="btn")

Поскольку Pug пытается определить, является ли содержимое скобок атрибутами или аргументами, лучше использовать запись +link()(class="btn"), во избежании возможных ошибок. Синтаксис +link(class="btn" ) также действителен, но не рекомендован.

Можно указать бесконечное количество аргументов, используя синтаксис “rest arguments”

mixin list(id, ...items)
  ul(id=id)
    each item in items
      li= item

+list('my-list', 1, 2, 3, 4)

Переменная в атрибуте миксина:

 

Миксин в атрибуте миксина:

 

Миксины в атрибуте миксина:

// определяем миксины
mixin header(leftside,rightside)

  header
    .head-left-wrap
      for mixleft in leftside
        +#{mixleft}

    .head-right-wrap.top-wrap
      for mixright in rightside
        +#{mixright}

mixin first
  ...

mixin second
  ...

mixin third
  ...

// вызываем
+header(['first', 'second'],['third'])

Простой html текст (Plain Text)

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

Обернуть текст тегом

p Тут находится обычный <em>длинный</em> текст.

 Использовать html занимающий всю строку

<html>

body
  p Indenting the body tag here would make no difference.
  p HTML itself isn't whitespace-sensitive.

</html>

С использованием префикса | (pipe)

p
  | The pipe always goes at the beginning of its own line,
  | not counting indentation.

Для больших html блоков стоит использовать символ . (точка)

script.
  if (usingPug)
    console.log('you are awesome')
  else
    console.log('use pug')
div
  p This text belongs to the paragraph tag.
  br
  .
    This text belongs to the div tag.

Здравствуйте!

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

Инсталента
Пожалуйста, активируйте JavaScript.
Please enable JavaScript.
return; 1