Атрибуты

Атрибуты тегов похожи на атрибуты HTML (с необязательными запятыми), но их значения — это просто обычный JavaScript.

(ПРИМЕЧАНИЕ: В примерах на этой странице используется символ | (|) для управления пробелами.)

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

<a href="//google.com">Google</a>
<a class="button" href="//google.com">Google</a>
<a class="button" href="//google.com">Google</a>

Обычные выражения JavaScript также работают:

- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')

<body class="authed"></body>

Многострочные атрибуты

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

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

<input type="checkbox" name="agreement" checked="checked" />

Если ваша среда выполнения JavaScript поддерживает шаблонные строки ES2015 (шаблонные строки) (включая Node.js/io.js 1.0.0 и более поздние версии), вы можете использовать этот синтаксис для атрибутов. Это очень полезно для атрибутов с очень длинными значениями:

input(data-json=`
  {
    "very-long": "piece of ",
    "data": true
  }
`)

<input data-json="
  {
    &quot;very-long&quot;: &quot;piece of &quot;,
    &quot;data&quot;: true
  }
" />

Атрибуты в кавычках

Если имя вашего атрибута содержит странные символы, которые могут помешать синтаксису JavaScript, либо заключите его в кавычки, используя "" или '', либо используйте запятые для разделения разных атрибутов. Примеры таких символов включают [] и () (часто используемые в Angular 2).

//- In this case, `(click)` is treated as a
//- function call instead of a attribute name,
//- resulting in the unusual error.
div(class='div-class' (click)='play()')

index.pug:4:11
    2| //- function call instead of a attribute name,
    3| //- resulting in the unusual error.
  > 4| div(class='div-class' (click)='play()')
-----------------^

Syntax Error: Assigning to rvalue

div(class='div-class', (click)='play()')
div(class='div-class' '(click)'='play()')

<div class="div-class" (click)="play()"></div>
<div class="div-class" (click)="play()"></div>

Интерполяция атрибутов

Внимание

Предыдущие версии Pug/Jade поддерживали синтаксис интерполяции, такой как:

a(href="/#{url}") Link

Этот синтаксис больше не поддерживается. Альтернативы приведены ниже. (См. наше руководство по миграции для получения дополнительной информации об других несовместимостях между Pug v2 и предыдущими версиями.)

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

Просто напишите атрибут на JavaScript:

- var url = 'pug-test.html';
a(href='/' + url) Link
|
|
- url = 'https://example.com/'
a(href=url) Another link

<a href="/pug-test.html">Link</a>
<a href="https://example.com/">Another link</a>

Если ваша среда выполнения JavaScript поддерживает шаблонные строки ES2015 (шаблонные строки) (включая Node.js/io.js 1.0.0 и более поздние версии), вы также можете использовать его синтаксис для упрощения атрибутов:
```
- var btnType = 'info'
- var btnSize = 'lg'
button(type='button' class='btn btn-' + btnType + ' btn-' + btnSize)
|
|
button(type='button' class=`btn btn-${btnType} btn-${btnSize}`)
```
```
<button class="btn btn-info btn-lg" type="button"></button>
<button class="btn btn-info btn-lg" type="button"></button>
```

Неэкранированные атрибуты

По умолчанию все атрибуты экранируются — то есть специальные символы заменяются последовательностями экранирования — для предотвращения атак (например, межсайтового скриптинга). Если вам нужно использовать специальные символы, используйте != вместо =.

div(escaped="<code>")
div(unescaped!="<code>")

<div escaped="&lt;code&gt;"></div>
<div unescaped="<code>"></div>

Внимание

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

Булевы атрибуты

Булевы атрибуты дублируются Pug. Принимаются булевы значения (true и false). Когда значение не указано, предполагается true.

input(type='checkbox' checked)
|
|
input(type='checkbox' checked=true)
|
|
input(type='checkbox' checked=false)
|
|
input(type='checkbox' checked=true.toString())

<input type="checkbox" checked="checked" />
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" checked="true" />

Если тип документа — html, Pug знает, что не нужно дублировать атрибут и вместо этого использует краткую запись (понятную всем браузерам).

doctype html
|
|
input(type='checkbox' checked)
|
|
input(type='checkbox' checked=true)
|
|
input(type='checkbox' checked=false)
|
|
input(type='checkbox' checked=true && 'checked')

<!DOCTYPE html>
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox" checked="checked">

Атрибуты стиля

Атрибут style может быть строкой, как любой обычный атрибут; но он также может быть объектом, что удобно, когда стили генерируются с помощью JavaScript.

a(style={color: 'red', background: 'green'})

<a style="color:red;background:green;"></a>

Атрибуты класса

Атрибут class может быть строкой, как любой обычный атрибут; но он также может быть массивом имён классов, что удобно при генерации из JavaScript.

- var classes = ['foo', 'bar', 'baz']
a(class=classes)
|
|
//- the class attribute may also be repeated to merge arrays
a.bang(class=classes class=['bing'])

<a class="foo bar baz"></a>
<a class="bang foo bar baz bing"></a>

Он также может быть объектом, который сопоставляет имена классов со значениями true или false. Это полезно для применения условных классов.

- var currentUrl = '/about'
a(class={active: currentUrl === '/'} href='/') Home
|
|
a(class={active: currentUrl === '/about'} href='/about') About

<a href="/">Home</a>
<a class="active" href="/about">About</a>

Литералы классов

Классы могут быть определены с помощью синтаксиса .classname.

a.button

<a class="button"></a>

Поскольку div — это такой распространённый выбор тега, он является значением по умолчанию, если вы опустите имя тега.

.content

<div class="content"></div>

Литералы ID

ID могут быть определены с помощью синтаксиса #idname.

a#main-link

<a id="main-link"></a>

#content

<div id="content"></div>

&attributes

Произносится как «и атрибуты», синтаксис &attributes может использоваться для разбиения объекта на атрибуты элемента.

div#foo(data-bar="foo")&attributes({'data-foo': 'bar'})

<div id="foo" data-bar="foo" data-foo="bar"></div>

В приведённом выше примере используется литерал объекта. Но вы также можете использовать переменную, значение которой является объектом. (См. также: Атрибуты миксинов).

- var attributes = {};
- attributes.class = 'baz';
div#foo(data-bar="foo")&attributes(attributes)

<div class="baz" id="foo" data-bar="foo"></div>

Внимание

Атрибуты, применённые с помощью &attributes, не экранируются автоматически. Вы должны убедиться, что очищаете любые пользовательские вводы, чтобы избежать межсайтового скриптинга (XSS). Если вы передаёте attributes из вызова миксина, это делается автоматически.