Jade - 控制HTML输出中的换行

Question

我有一个简单的搜索表单，我希望使用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形式阅读的代码，不能简单地从整个项目中删除空格。

有没有一种方法可以输出我所指示的表格，同时保留文档中其余部分的空白和换行？

- William Owen

Answer 1

我也在寻找同样的东西，然后找到了这个：http://scalate.fusesource.org/documentation/jade-syntax.html

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

我遇到了一个在<a>标签内部的空格问题：

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>

- Todd Carter

---

这似乎适用于某些标签，例如 blockquote 和 a，就像您在此处的示例中一样，但是使用 input 标签尝试时，Jade v1.11.0 会产生错误并且无法编译。顺便说一下，上面的 fusesource.org 链接不起作用。文档也可以在这里找到。 - matty

Answer 2

如果这是针对Node JS的Jade模板引擎，你可以使用'pretty'参数来强制Jade去除或添加空格。

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

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

- qodeninja

Answer 3

我也遇到了这个问题。在开发中，locals.pretty设置为true是因为我想读取渲染后的HTML。两个输入框之间的空格会导致样式问题。

我的当前解决方案是使用原始HTML来处理这两个输入框：

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

这段文字包含了一些非Jade文本，但会将输入内容渲染出来而不会在它们之间添加额外的空格。

- James Chen

---

您可以使用任何浏览器检查器来阅读生成的HTML，而不是原始代码。 - Даниил Пронин