Pug - にほんご。

Mixins

ミックスイン

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


//- 宣言
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>

© 2017 pugjs.org Released under the MIT license

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