如何在哈巴狗循环中回显一些 HTML？

Question

我正在尝试使用 pug 2.0.3 执行此操作：

- var myCode = "<i class='icon fa fa-heart' aria-hidden='true' data-aos='zoom-in'></i>";
- var i = 0;

while i < 10
  !{myCode}
  i++

我希望 myCode 的内容被编译到 HTML 十次，但我却收到了这个错误： unexpected text "!{myC"

如何让 pug 在循环中回显一些未转义的 html？

Answer 1

工作循环：

while i < 10
    div(class="hidden-" + i++)
    div !{myCode}

我找不到 "silently" 遍历 i 的方法，所以我不得不为此制作一个虚拟 class。

编译后的 HTML 看起来像这样：

<div class="hidden-0"></div>
<div><i class='icon fa fa-heart' aria-hidden='true' data-aos='zoom-in'></i></div>
<div class="hidden-1"></div>
<div><i class='icon fa fa-heart' aria-hidden='true' data-aos='zoom-in'></i></div>
...

Answer 2

这只哈巴狗应该可以解决问题，并且 here's a codepen 可以使用它（您必须使用开发工具检查它的作用，因为没有可见元素）。

这只哈巴狗：

- var i = 0
while i < 10
  div(class='hidden-' + i)
  div
    i.icon.fa.fa-heart(aria-hidden='true' data-aos='zoom-in')
  - i++

产生这个 html:

<div class="hidden-0"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-1"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-2"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-3"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-4"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-5"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-6"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-7"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-8"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-9"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>

如果您希望 div 和 i/icon 位于隐藏 X div 内，那么只需像这样缩进即可：

- var i = 0
while i < 10
  div(class='hidden-' + i)
    div
      i.icon.fa.fa-heart(aria-hidden='true' data-aos='zoom-in')
  - i++

产生这个：

<div class="hidden-0">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-1">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-2">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-3">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-4">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-5">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-6">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-7">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-8">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-9">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>

如何在哈巴狗循环中回显一些 HTML？

How do I echo some HTML within a pug loop?

html

preprocessor

pug