16

我目前正在一个新项目中使用 Jade。它似乎非常适合编写 webapp 布局，但不适用于编写静态内容，例如

包含文本的元素。

例如，要创建这样一个段落，我相信我需要这样做：

p
  | This is my long,
  | multi-line
  | paragraph.

对于一个充满真实文本段落的静态网页，由于每行开头的管道符号，使用翡翠成为一种负担。

是否有某种语法糖可以将整个块标记为文本节点，就像管道符号逐行一样？还是我不知道的现有过滤器？

我正在探索的一个解决方案是创建一个 :block 过滤器或其他东西，它在每一行前面加上 | 然后将其传递给 Jade，但至少可以说，jade 关于创建过滤器的文档很少，因此可能需要一段时间才能弄清楚。如果有人可以就这种解决方案提供指导，我将不胜感激。

4

2 回答 2

39

从玉 github 页面：

p.
foo asdf
asdf
 asdfasdfaf
 asdf
asd.

产生输出：

<p>foo asdf
asdf
  asdfasdfaf
  asdf
asd
.
</p>

之后的尾随期p就是您要查找的内容。

于 2011-04-28T14:41:01.230 回答
8

经过一番修修补补，我制定了完成此任务的过滤器的详细信息。在这里发布答案，因为我认为这对使用玉的其他人有用。

创建过滤器的代码非常简单：

var jade = require ("jade");

jade.filters.text = function(block, compiler){
    return new TextBlockFilter(block).compile();
};

function TextBlockFilter(node) {
    this.node = node;
}

TextBlockFilter.prototype.__proto__ = jade.Compiler.prototype;

TextBlockFilter.prototype.visit = function(node){

    // first this is called with a node containing all the block's lines
    // as sub-nodes, with their first word interpreted as the node's name
    //
    // so here, collect all the nodes' text (including its name)
    // into a single Text node, and then visit that instead.
    // the child nodes won't be visited - we're cutting them out of the
    // parse tree

    var text = new jade.nodes.Text();
    for (var i=0; i < node.length; i++) {
        text.push (node[i].name + (node[i].text ? node[i].text[0] : ""));
    }
    this.visitNode (text);
};

然后标记看起来像这样。请注意，它允许您在 :text 块之间包含其他玉器：

p
  :text
    This is my first line of text,
    followed by another
    and another.  Now let's include a jade link tag:
  a(href="http://blahblah.com")
  :text
    and follow it with even more text 
    and more,
    etc
于 2011-01-17T21:33:14.277 回答