16

私は現在、新しいプロジェクトでJadeを使用しています。Webアプリのレイアウトを作成するのには適しているようですが、次のWebページなどの静的コンテンツを作成する場合には適していません。

テキストを含む要素。

たとえば、そのような段落を作成するには、次のことを行う必要があると思います。

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

テキストの実際の段落でいっぱいの静的なWebページの場合、各行の先頭にあるパイプシンボルのために、翡翠を使用するのは負担になります。

パイプシンボルが行ごとに行うように、ブロック全体をテキストノードとしてマークするためのある種の構文糖衣はありますか？または私が知らない既存のフィルター？

私が探求している解決策の1つは、各行の前に|を付ける：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 に答える