Question

假设我有以下HTML，我想使用Pug实现：

<div class="person"><i class="icon person"></i>{{ name1 }}</div>
<div class="person"><i class="icon person"></i>{{ name2 }}</div>
<div class="person"><i class="icon person"></i>{{ name3 }}</div>

这些连续几个，所以我想内联标签。如果我使用这个Pug模板：

.person: i.icon.person {{ name1 }}
.person: i.icon.person {{ name2 }}
.person: i.icon.person {{ name3 }}

然后HTML输出变为：

<div class="person"><i class="icon person">{{ name1 }}</i></div>
<div class="person"><i class="icon person">{{ name2 }}</i></div>
<div class="person"><i class="icon person">{{ name3 }}</i></div>

<i>包装名称，这是不受欢迎的。如果我将模板分成多行，那么它会给我我想要的输出：

.person
  i.icon.person
  | {{ name1 }}
.person
  i.icon.person
  | {{ name2 }}
.person
  i.icon.person
  | {{ name3 }}

但现在需要9行而不是3行。

是否有任何内联标记的方法，使每个.person元素只有1行？

Answer 1

除了Gibin的回答，这是另一种写作的紧凑方式：

each name in ['name1', 'name2', 'name3']
  .person: <i class="icon person"><i>{{ name }}

Answer 2

由于我的理解有限，使用pug语法是不可能的。但是，由于HTML可以和帕格一起写，我认为以下是有用的。

for dir in $(find . -type d); do
    echo "`basename ${dir}`: $(find ${dir} -maxdepth 1 -type f | wc -l)"
done

甚至更好，更短的方式，

.person: <i class="icon person"><i>{{ name1 }}
.person: <i class="icon person"><i>{{ name2 }}
.person: <i class="icon person"><i>{{ name3 }}

希望这有帮助。

如何使用Pug内联图标和一些文本以及div中的内容？

2 个答案: