混入(Mixins)

¥Mixins

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

¥Mixins allow you to create reusable blocks of Pug.

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

Mixin 被编译为函数，并且可以接受参数：

¥Mixins are compiled to functions, and can take arguments:

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

混入块(Mixin Blocks)

¥Mixin Blocks

Mixins 还可以将 Pug 块作为内容：

¥Mixins can also take a block of Pug to act as the content:

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

¥Mixin Attributes

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

¥Mixins also get an implicit attributes argument, which is taken from the attributes passed to the mixin:

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

注释

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

¥The values in attributes by default are already escaped! You should use != to avoid escaping them a second time. (See also unescaped attributes.)

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

¥You can also use mixins with &attributes:

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

注释

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

¥The syntax +link(class="btn") is also valid and equivalent to +link()(class="btn"), since Pug tries to detect if parentheses’ contents are attributes or arguments. Nevertheless, we encourage you to use the second syntax, as you pass explicitly no arguments and you ensure the first parenthesis is the arguments list.

默认参数的值(Default Argument’s Values)

¥Default Argument’s Values

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

¥You can also set default values for you arguments. Same as setting default function parameters in 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>

其余参数(Rest Arguments)

¥Rest Arguments

你可以使用 “剩余参数” 语法编写带有未知数量参数的 mixin。

¥You can write mixins that take an unknown number of arguments using the “rest arguments” syntax.

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

混入(Mixins)

混入块(Mixin Blocks) ¶

混入属性(Mixin Attributes) ¶

注释

注释

默认参数的值(Default Argument’s Values) ¶

其余参数(Rest Arguments) ¶

混入块(Mixin Blocks)

混入属性(Mixin Attributes)

默认参数的值(Default Argument’s Values)

其余参数(Rest Arguments)