混入 Mixin
混入是一种允许您在 Pug 中重复使用一整个代码块的方法。
//- 定义
mixin list
ul
li foo
li bar
li baz
//- 使用
+list
+list
它们会被编译成函数形式,您可以传递一些参数:
mixin pet(name)
li.pet= name
ul
+pet('猫')
+pet('狗')
+pet('猪')
混入的块
混入也可以把一整个代码块像内容一样传递进来:
mixin article(title)
.article
.article-wrapper
h1= title
if block
block
else
p 没有提供任何内容。
+article('Hello world')
+article('Hello world')
p 这是我
p 随便写的文章
混入的属性
混入也可以隐式地,从“标签属性”得到一个参数 attributes
:
mixin link(href, name)
//- attributes == {class: "btn"}
a(class!=attributes.class href=href)= name
+link('/foo', 'foo')(class="btn")
信息
attributes
里的值已经被(作为标签属性)转义了,所以您可能需要用 !=
的方式赋值以避免发生二次转义(详细解释可以查阅不转义的属性)。
您也可以直接用 &attributes
方法来传递 attributes
参数:
mixin link(href, name)
a(href=href)&attributes(attributes)= name
+link('/foo', 'foo')(class="btn")
信息
+link(class="btn")
这种写法也是允许的,且等价于 +link()(class="btn")
,因为 Pug 会判断括号内的内容是属性还是参数。但我们鼓励您使用后者的写法,明确地传递空的参数,确保第一对括号内始终都是参数列表。
剩余参数
您可以用剩余参数(rest arguments)语法来表示参数列表最后传入若干个长度不定的参数,比如:
mixin list(id, ...items)
ul(id=id)
each item in items
li= item
+list('my-list', 1, 2, 3, 4)