Миксины

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

//- Declaration
mixin list
  ul
    li foo
    li bar
    li baz
//- Use
+list
+list

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

Миксины компилируются в функции и могут принимать аргументы:

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

<ul>
  <li class="pet">cat</li>
  <li class="pet">dog</li>
  <li class="pet">pig</li>
</ul>

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

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

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

<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>No content provided</p>
  </div>
</div>
<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>This is my</p>
    <p>Amazing article</p>
  </div>
</div>

Атрибуты миксинов

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

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

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

<a class="btn" href="/foo">foo</a>

Примечание

Значения в attributes по умолчанию уже экранированы! Вы должны использовать != для предотвращения их повторного экранирования. (См. также неэкранированные атрибуты.)

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

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

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

<a class="btn" href="/foo">foo</a>

Примечание

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

Значения аргументов по умолчанию

Вы также можете задать значения по умолчанию для ваших arguments. Аналогично установке параметров функций по умолчанию в ES6.

//- Declaration
mixin article(title='Default Title')
  .article
    .article-wrapper
      h1= title

//- Use
+article()

+article('Hello world')

<div class="article">
  <div class="article-wrapper">
    <h1>Default Title</h1>
  </div>
</div>
<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
  </div>
</div>

Аргументы с остатком

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

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

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

<ul id="my-list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>