Question

我只是有一个小问题我无法找到关于jade / pug模板引擎的答案，这就是链接标记的行为。我只是把我的脚趾浸入这个模板引擎中，到目前为止看起来很酷。

为什么这样：

#container.col
  a link
  if youAreUsingJade
    p You are amazing
  else
    p Get on it!
  a link
  p.
    Jade is a terse and simple
    templating language with a
    strong focus on performance
    and powerful features.
  a link

编译成这个？：

<div id="container" class="col"><a>link</a>
  <p>You are amazing</p><a>link</a>
  <p>
    Jade is a terse and simple
    templating language with a
    strong focus on performance
    and powerful features.
  </p><a>link</a>
</div>

它们位于同一容器中，为什么链接标记会回绕到最后一个标记？

我希望它看起来像这样：

<div id="container" class="col">
  <a>link</a>
  <p>You are amazing</p>
  <a>link</a>
  <p>
    Jade is a terse and simple
    templating language with a
    strong focus on performance
    and powerful features.
  </p>
  <a>link</a>
</div>

Answer 1

即使使用<a>选项，Pug编译器也不会为包含pretty标记的内联元素添加新行。

Inline elements是那些新行具有意义且不能用于美容目的的行。例如，是内联元素，因为和\n不同，因此我们不会插入新行。对于像<div>这样的块级元素，我们可以安全地插入新行以进行缩进。

https://github.com/pugjs/pug/issues/2075#issuecomment-138125136

您可以在每个= "\n\t"之前使用a link之类的内容强制执行您所说的预期结果，但这会导致混乱和无法管理。

同样来自上面引用的相同问题评论：

我觉得我们需要澄清一般情况下不鼓励漂亮的打印。

我发现现代浏览器的开发工具很好地输出了html。

Answer 2

如果您正在谈论<a href="https://www.facebook.com/"><img src="potato.jpg"></a>缠绕<img src="potato.jpg">，那是因为您的图片是这样缩进的

a(href='https://www.facebook.com/')
 img(src='potato.jpg')

解决方案很简单

a(href='https://www.facebook.com/')
img(src='potato.jpg')

Jade对缩进非常具体，如果元素是缩进的，则它被视为子元素。所有的孩子都必须有相同的缩进

Jade / pug - 链接包装在同一容器中的最后一个标签后面

2 个答案: