Frage

Ich bin derzeit mit Jade an einem neuen Projekt. Es scheint gut geeignet, um Webapp Layouts zu komponieren, aber nicht für das Schreiben von statischen Inhalten, wie zum Beispiel einer Webseite

Elemente enthalten Text.

Zum Beispiel, wie ein Absatz zu schaffen, ich glaube, ich brauche dies zu tun:

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

Für eine statische Web-Seite ist voller wahrer Textabsätze, Jade mit wird eine Belastung aufgrund dieses Pipe-Symbol am Anfang jeder Zeile.

Gibt es irgendeine Art von syntaktischem Zucker für die Markierung des gesamten Blockes als Textknoten, wie das Pipe-Symbol macht auf einer Zeile-für-Zeile-Basis? Oder einen bestehenden Filter Ich bin nicht bewusst?

Eine Lösung, die ich erforschen bin ist die Schaffung eines: Blockfilter oder etwas, dass jede Zeile mit einem prepends | und dann übergibt sie an Jade, aber Jade in der Dokumentation zum Erstellen von Filtern ist spärlich, gelinde gesagt, so dass eine Weile dauern, um herauszufinden. Wenn jemand Anhaltspunkte für eine solche Lösung bieten kann ich es schätzen würde.

War es hilfreich?

Lösung

Von der Jade Github Seite :

p.
foo asdf
asdf
 asdfasdfaf
 asdf
asd.

erzeugt eine Ausgabe:

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

Der nachgestellte Punkt nach dem p ist das, was Sie suchen.

Andere Tipps

Nach einiger Bastelei arbeitete ich die Details eines Filters aus, die dies leistet. Posting hier die Antwort, da ich denke, dies für andere nützlich sein wird, mit Jade.

Der Code, die Filter zu schaffen stellt sich heraus, ganz einfach sein:

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);
};

Und dann die Auszeichnungs sieht wie folgt aus. Beachten Sie, dass es Ihnen erlaubt, andere Jade Material enthalten zwischendurch: Textblöcke:

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
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top