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

Posted 2023-03-07

【中文标题】使用 Jade 呈现的 HTML 值中的额外空格

【英文标题】：Extra whitespace in HTML values rendered with Jade

【发布时间】：2012-01-04 04:32:15

【问题描述】：

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

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

label(for="keyword") Keyword

当它被渲染时，源代码将如下所示：

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

在我的 CSS 中出现了一些额外的空白搞乱的问题。另外，它看起来并不整洁:)

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

【问题讨论】：

确保 Jade 中的“关键字”后面没有任何空格，这可能会导致问题

谢谢，仔细检查以确保我没有任何问题，但问题仍然存在。

【参考方案1】：

查看底部的更新

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

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

如果您在 pretty 模式 (pretty: true) 中有 jade 渲染，那么它将使用嵌套缩进排列您生成的源代码（标签）。关闭漂亮的打印应该可以解决您的问题（尽管请确保您没有尾随空格，正如@alessioalex 所指出的那样）。

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

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

docs 可以为您提供更多详细信息（在这种情况下搜索 html）。 github上有开放的issue #341，它建议使用类似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将标签上的.后缀视为标签将包含文本块（仅）的指示符，然后不提供文本块，所以默认为''，一个空字符串。

【讨论】：

嘿，感谢您的评论！你是对的，关闭漂亮模式肯定会有所帮助，但我需要在我的情况下保持启用它。 . 的有趣技巧，但我一直在关注可以真正扩展的东西。肯定会继续调查并发布我在这里找到的任何内容。

@Jon，我希望 scalate 样式方法将被正式采用，因为它似乎是对当前系统的逻辑扩展 - 我们将拭目以待。 TJ 刚刚忙于这么多项目……我们拭目以待！

@st3 我只是提醒一下，因为它是一个未记录的功能：此行为可能不会继续工作，因为jade 会继续得到改进。跨度>