Mixins

Mixins 允许你创建可重复使用的 Pug 块。

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

Mixins 编译为函数，并且可以接受参数

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

Mixin 块

Mixins 还可以使用一个 Pug 块作为内容

<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>

Mixin 属性

Mixins 还会获得一个隐式的 attributes 参数，该参数取自传递给 mixin 的属性

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

注意

attributes 中的值默认情况下已经过转义！你应该使用 != 来避免再次转义它们。（另请参阅未转义属性。）

你还可以将 mixins 与 &attributes 一起使用

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

注意

语法 +link(class="btn") 也是有效的，并且等同于 +link()(class="btn")，因为 Pug 尝试检测括号的内容是属性还是参数。尽管如此，我们鼓励你使用第二个语法，因为你明确地不传递任何参数，并且确保第一个括号是参数列表。

默认参数值

你还可以为 arguments 设置默认值。与在 ES6 中设置默认函数参数相同。

<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，方法是使用“剩余参数”语法。

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

Mixins

Mixin 块 ¶

Mixin 属性 ¶

注意

注意

默认参数值 ¶

剩余参数 ¶

Mixin 块

Mixin 属性

默认参数值

剩余参数