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格式阅读的代码，并且不能简单地从我的项目中删除整个空格。

有没有办法按照指示输出我的表格，同时在文档的其余部分保留白色间距和换行符？

Answer 1

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

在纯文本下：删除空白：＆gt;和＆lt;

我在＆lt; a＆gt;内部的空格有问题。标记：

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

导致

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

添加＆lt;到最后一行：

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

导致

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

Answer 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），并在加载时为该模板设置pretty to false，或者为此目的创建一个帮助程序。

Answer 3

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

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

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

这会混合一些非玉的文字，但渲染输入时没有额外的空间。

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

3 个答案: