Jade Template-Engine (unter node.js): mehrzeiligen Block ohne Pipesymbol
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.
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