html - 使用 Jade 呈现的 HTML 值中的额外空格

Question

每次我在 Jade 中编写 HTML 时，我都会在每个元素的值之后添加额外的空格。

例如，我的 Jade 模板中会有这样一行:

label(for="keyword") Keyword

渲染后，源代码将如下所示:

<label for="keyword_1">Keyword
          </label>

我的 CSS 遇到了一些额外的空白乱码问题。另外，它看起来不太整洁 :)

有人知道如何防止它被插入吗？

Answer 1

检查底部的更新

我假设您使用的是 express - 检查您的应用设置。

app.set('view options', { pretty: false })

如果您在 pretty 模式下呈现 jade (pretty: true)，那么它将使用嵌套缩进排列您生成的源代码(标签) .关闭 pretty-print 应该可以解决您的问题(尽管确保您没有尾随空格，正如@alessioalex 所指出的那样)。

如果您有理由要求输出漂亮的格式(在我的例子中是客户规范)，那么您可以尝试一些其他的事情。我在使用 textarea 标签时遇到了类似的问题；令人沮丧，因为空白实际上被注入(inject)到表单的内容中。我解决这个问题的方法是嵌入带有结束标记的文字 html:

<textarea name="someField"></textarea>

docs可以为您提供更多详细信息(在这种情况下搜索 html)。有开issue #341在 github 上建议像 this one for scalate 这样的方法，但它目前在 jade 中不起作用(自版本 0.19.0 起)。

HTH

更新

好的 - 微妙而酷...有一种更好的方法来保持 pretty: true 的性感输出并避免标签内的空格(我的 textarea 示例)... 我只是尝试将 . 附加到标签的末尾(参见代码)并且 Just Worked™ :-)

form(name='frmname', method='POST')
  textarea(name='someField').

渲染:

<form name="frmname" method="POST">
  <textarea name="someField"></textarea>
</form>

美丽!

为什么会这样？因为 jade 将标签上的 . 后缀视为标签将包含文本 block (仅)的指示符，然后不提供文本 block ，因此默认为''，一个空字符串。