Mixin 嵌套在段落中

Question

我目前正在尝试将图形放入一段文本中，但是我运行遇到了以下问题：

mixin figure
  figure(style="float:right" width="50%")
    img(src="image.jpeg" alt="Alttext")
    figcaption Caption

block content
  div(class="content-width")
    h1 Heading
    p.
      #[+figure]
      Lorem ipsum dolor sit amet,

评估为

<div class="content-width">
<h1>Heading</h1>
<p></p>
<figure>[...]</figure>
Lorem ipsum dolor sit amet,

我本希望得到以下结果：

<div class="content-width">
<h1>Heading</h1>
<p>
<figure>[...]</figure>
Lorem ipsum dolor sit amet,
</p>

这种行为是否正确，我对 Pug 的使用有误吗？还是我遇到了错误？

Answer 1

编辑：

图形元素是块级元素，在 HTML 中不允许作为段落元素的子元素。您看到的输出很可能是浏览器试图通过在遇到 figure 元素时立即关闭未闭合的段落标记来更正无效的 HTML。

上一个答案：

#[] 语法严格适用于 tag interpolation，不适用于混入。

相反，在 mixin 之后使用dot block 语法，像这样—

block content div(class="content-width") h1 Heading p +figure . Lorem ipsum dolor sit amet,

——或者使用 piped text 语法，像这样：

block content div(class="content-width") h1 Heading p +figure | Lorem ipsum dolor sit amet,

Mixin 嵌套在段落中

Mixin nested in paragraph

pug