Question

我很难在pug js模板（以前称为jade）的each语句中删除元素之间的换行符

我的代码看起来像这样。我想在呈现HTML时在li元素之间没有空格，所以我试图在它们之间使用注释。

mixin nav(links)
  ul.nav <!--
    each link in links
      |-->
      li(class=(section == link.key ? 'active' : null)): a(href=link.href)= link.label
      |<!--
    |-->

现在这给了我这个结果：

<ul class="nav"><!---->
  <li class="active"><a href="/">Home</a></li><!---->
  <li><a href="/foo">Foo</a></li><!---->
  <li><a href="/bar">Bar</a></li><!---->
  <li><a href="/yada">Yada</a></li><!---->
</ul>

有没有一种好方法告诉哈巴狗我希望这些元素之间没有空格，或者这是语言的限制？我正在使用KeystoneJS，它在开发环境中会告诉哈巴狗解释器美化HTML。我希望产品在开发到生产之间保持一致（而不是在CSS中编写一种解决方法，否则会被生产环境中的缩小所否定）

Answer 1

从模板和注释中删除|（竖线）字符。如果您仍然有新行，那么是Keystone.js在创建新行。

删除|字符的原因是因为根据官方PugJS website

您可以添加一个或多个空管道-管道后有空格或没有任何内容。这将在呈现的HTML中插入空格。

Answer 2

在pug config中有一个“ pretty”属性。如果将Pug设置为true（默认为false），则会将空格添加到结果HTML中。这可能是造成您问题的原因。 https://pugjs.org/api/reference.html

pugjs（jade模板） - 删除块语句中的换行符

2 个答案: