pugjs (jade 模板) - 删除块语句中的换行符答案

【问题标题】：pugjs (jade template) - remove newlines in block statementpugjs (jade 模板) - 删除块语句中的换行符
【发布时间】：2017-12-24 06:38:09
【问题描述】：

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

我的代码如下所示。我希望在呈现 HTML 时 li 元素之间没有空格，因此我尝试在它们之间使用 cmets。

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>

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

【问题讨论】：

Pug 将所有内容呈现在一行上，所以这一定是由 keystone.js 引起的。
我投票结束这个问题，因为这是对 pug 的增强请求，应该发布在 pug github 问题区域。

标签： javascript html node.js pug keystonejs

【解决方案1】：

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

【讨论】：

【解决方案2】：

从模板和 cmets 中删除 |（竖线）字符。如果您仍然有新行，那么是 Keystone.js 正在制作新行。

之所以去掉|这个字符是因为根据官方PugJS website，

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

【讨论】：