Mixins

更新日: 2018-09-10

ミックスイン

ミックスインはテンプレート内でブロックを再利用するための仕組みです。

//- 宣言
mixin list
  ul
    li foo
    li bar
    li baz
//- 呼び出し
+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>

ブロックミックスイン

ミックスインはブロックとしても受け取ることができます。

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は既にエスケープされた状態です！
2回目のエスケープを避けるには!=を使ってください。 (属性値のエスケープを参照してください。)

&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は括弧の中身が属性か、引数かを自動で判定してくれます。
しかし、2つ目の書き方をお勧めします。引数が無いことを明示的に示すことで、最初の括弧が引数リストであることを示すことができる為です。

可変長引数

ミックスインは不特定数の引数を受け取ることができます。 "rest arguments"構文...valuesを利用します。

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>

このコンテンツはpugドキュメントを翻訳/改変したものです。