Jade - 控制 HTML 输出中的换行符答案

【问题标题】：Jade - Controlling line-breaks in the HTML outputJade - 控制 HTML 输出中的换行符
【发布时间】：2012-08-05 16:07:39
【问题描述】：

我希望使用 Jade 实现一个简单的搜索表单。

form
    input(
        type="text"
        size="16"
        placeholder="Enter your keywords")
    input(
        type="button"
        value="Search")

输出呈现为：

<form>
      <input type="text" size="16" placeholder="Enter your keywords">
      <input type="button" value="Search">
</form>

这是完美的，除了换行符导致我的按钮和搜索按钮之间有一个空格。我不需要文本框和按钮之间的空间。我需要这样的代码呈现：

<form>
      <input type="text" size="16" placeholder="Enter your keywords"><input type="button" value="Search">
</form>

但是，我正在使用这个项目来创建需要以 HTML 形式读取的代码，并且不能简单地从整个项目中删除空白。

有没有一种方法可以输出我的表单，同时在文档的其余部分保留空白和换行符？

【问题讨论】：

标签： html whitespace line-breaks pug templating

【解决方案1】：

我一直在寻找同样的东西并遇到了这个：http://scalate.fusesource.org/documentation/jade-syntax.html

在纯文本下：删除空格：> 和

我在标签内遇到了空格问题：

a.external(href={"http://foo.bar/" + reference.dxLink.get})
  |CrossRef

导致

<a href="http://foo.bar/10.1002/rmv.439">
                  CrossRef
</a>

将

a.external(href={"http://foo.bar/" + reference.dxLink.get})<
  |CrossRef

导致

<a href="http://foo.bar/10.1002/rmv.439">CrossRef</a>

【讨论】：

这似乎适用于某些标签，例如blockquote 和 a，就像您在此处的示例一样，但 Jade v1.11.0 会产生错误，并且在使用 input 标签尝试此操作时不会编译。 FWIW，上面的 fusesource.org 链接不起作用。该文档也可在here 获得。

【解决方案2】：

如果这是 Jade for Node JS 你可以force jade to remove or add whitespace with the 'pretty' paramater

var jade = require('./../')
  , path = __dirname + '/whitespace.jade'
  , str = require('fs').readFileSync(path, 'utf8')
  , fn = jade.compile(str, { filename: path, pretty: true });

您可以将表单模板放在一个单独的文件中（例如：myform.jade），并在加载时将该模板设置为 false，或者为同样的目的创建一个帮助程序。

【讨论】：

【解决方案3】：

我也有这个问题。 locals.pretty 在开发中设置为 true，因为我想阅读呈现的 html。两个输入之间的空间会导致样式问题。

我目前的解决方案是对这两个输入使用原始 html：

form
  <input type="text" size="16" placeholder="Enter your keywords"><input type="button" value="Search">

这混合了一些非玉文本，但呈现的输入没有额外的空间。

【讨论】：

您可以使用任何浏览器检查器而不是原始代码来读取生成的 HTML。