Pug模板中Mixin内能否使用标签？如何在Mixin变量中用标签？

问题1：在Pug模板的Mixin中是否允许使用标签？ #

当然允许！Mixin 是 Pug 里专门用来复用代码块的核心特性，它本身就支持在内部使用任意 HTML 标签，甚至可以嵌套其他 Mixin。你提供的示例代码里，crblock Mixin 已经用到了 figure、div、img 和 figcaption 这些标签，这完全是合法且非常常见的写法，放心用就好。

问题2：如何在Pug模板Mixin的变量中使用标签？ #

你现在的问题是，当给 Mixin 传递带 HTML 标签的字符串（比如 'Text <br> text'）时，Pug 默认会把这些标签转义成纯文本，不会渲染成真正的 HTML 元素。解决这个问题有两种常用方法：

方法1：使用不转义输出运算符 != #

修改 Mixin 里的 figcaption 输出方式，把原来的 = 换成 !=，这样 Pug 就会直接解析变量里的 HTML 标签，而不是转义它：

mixin crblock(img, title)
  figure.cr-block
    .cr-block--img
      img(src=img, alt="")
    figcaption.cr-block--caption!= title

// 调用时直接传带HTML标签的字符串
+crblock('img/carelist/z1.svg', 'Text <br> text')

方法2：使用 Pug 的内联标签语法 #[...] #

如果你不想修改 Mixin 的输出逻辑，也可以在调用 Mixin 时，用 Pug 自带的内联标签语法来传递带标签的内容，这种方式不需要担心转义问题：

mixin crblock(img, title)
  figure.cr-block
    .cr-block--img
      img(src=img, alt="")
    figcaption.cr-block--caption= title

// 调用时用 #[br] 表示换行标签
+crblock('img/carelist/z1.svg', 'Text #[br] text')

注意：如果你的 title 变量来自用户输入，使用第一种方法时要注意 XSS 风险，建议先对用户输入进行 sanitize 处理；第二种方法因为是用 Pug 的语法解析，相对更安全。

内容的提问来源于stack exchange，提问作者user4860940