混入 Mixin ~~ Mixins

混入是一种允许您在 Pug 中重复使用一整个代码块的方法。

  1. //- 定义
  2. mixin list
  3.   ul
  4.     li foo
  5.     li bar
  6.     li baz
  7. //- 使用
  8. +list
  9. +list

它们会被编译成函数形式，您可以传递一些参数：

  1. mixin pet(name)
  2.   li.pet= name
  3. ul
  4.   +pet('猫')
  5.   +pet('狗')
  6.   +pet('猪')

混入的块 ~~ Mixin Blocks

混入也可以把一整个代码块像内容一样传递进来：

  1. mixin article(title)
  2.   .article
  3.     .article-wrapper
  4.       h1= title
  5.       if block
  6.         block
  7.       else
  8.         p 没有提供任何内容。
  10. +article('Hello world')
  12. +article('Hello world')
  13.   p 这是我
  14.   p 随便写的文章

混入的属性 ~~ Mixin Attributes

混入也可以隐式地，从“标签属性”得到一个参数 attributes：

  1. mixin link(href, name)
  2.   //- attributes == {class: "btn"}
  3.   a(class!=attributes.class href=href)= name
  5. +link('/foo', 'foo')(class="btn")

::: float info 提示 attributes 里的值已经被（作为标签属性）转义了，所以您可能需要用 != 的方式赋值以避免发生二次转义（详细解释可以查阅不转义的属性）。 :::

您也可以直接用 &attributes 方法来传递 attributes 参数：

  1. mixin link(href, name)
  2.   a(href=href)&attributes(attributes)= name
  4. +link('/foo', 'foo')(class="btn")

::: float info 提示 +link(class="btn") 这种写法也是允许的，且等价于 +link()(class="btn")，因为 Pug 会判断括号内的内容是属性还是参数。但我们鼓励您使用后者的写法，明确地传递空的参数，确保第一对括号内始终都是参数列表。 :::

剩余参数 ~~ Rest Arguments

您可以用剩余参数（rest arguments）语法来表示参数列表最后传入若干个长度不定的参数，比如：

  1. mixin list(id, ...items)
  2.   ul(id=id)
  3.     each item in items
  4.       li= item
  6. +list('my-list', 1, 2, 3, 4)