Unternehmer und Geek

Eigene Filter für Wintersmith mit Nunjucks

Die Dokumentation für Wintersmith ist sehr bescheiden und in Deutsch mag das hier die einzige Anleitung sein, welche du überhaupt finden wirst. Daher nehme ich mir die paar Minuten, um das kurz zu dokumentieren.

Grundlage für Wintersmith/Nunjucks Filter

Folgende Voraussetzungen müssen gegeben sein:
– Funktionierende Wintersmith Installation (dazu gehört auch Node.js)
– Das Plugin Wintersmith darf nicht installiert sein
– Via npm nunjucks installieren

Jade oder Nunjucks

Jade ist für mich ein No-go. Das sieht mir einfach zu kryptographisch aus. Es mag sicher Vorteile haben, doch ich habe mir noch nicht die Mühe genommen, mich da reinzulesen. Für mich persönlich ist eine Template Sprache in HTML. Daher ist die Wahl dann auch sehr schnell auf Nunjucks gefallen, da ich diese bereits von meinem kleinen Ausflug in die Django Welt kenne (dort heisst es halt Jinja).

Beispiel eines Wintersmith/Nunjuck Filters

Ich wollte einen Filter machen, welcher mir einen Teaser/Abstract aus dem Text extrahiert. Aufruf sollte wie folgt erfolgen:
~
{{ page.html | makeAbstract(150) }}
~
Wobei der Integer Wert die Anzahl Zeichen des Teasers angibt. Leider gibt es keinen entsprechenden Filter oder ich habe ihn grosszügigerweise übersehen.
Mein erster Versuch war, ein neues Plugin zu schreiben, welches sich in das bestehende Wintersmith-Nunjucks Plugin einklinkt und dann den Filter hinzufügt. Leider klappt das so nicht. Man muss daher das Wintersmith Nunjucks Plugin anpassen:
~
var nunjucks = require(«nunjucks»);
module.exports = function(env, callback) {
var NunjucksTemplate = function(template) {
this.template = template;
};
NunjucksTemplate.prototype.render = function render(locals, callback) {
try {
callback(null, new Buffer(this.template.render(locals)));
} catch (error) {
callback(error);
}
};
NunjucksTemplate.fromFile = function fromFile(filepath, callback) {
var nenv = new nunjucks.Environment(new nunjucks.FileSystemLoader(env.templatesPath));

  var makeAbstractFilter = nenv.addFilter('makeAbstract', function(str, n) {
      if (str == undefined) {
          str = "";
      } 
      str = str.replace(/(<([^>]+)>)/ig,"");
    var tooLong = str.length>n;
    var s_ = tooLong ? str.substr(0, n-1) : str;
    s_ = tooLong ? s_.substr(0,s_.lastIndexOf(' ')) : s_;
    return  tooLong ? s_ + '&hellip;' : s_;
});

callback(null, new NunjucksTemplate(nenv.getTemplate(filepath.relative)));

};

env.registerTemplatePlugin(«*/.*(html)», NunjucksTemplate);
callback();
};
~
Das ist der Code, welcher 1:1 vom Wintersmith-Nunjucks Plugin kopiert wurde, mit der Ausname der Funktion makeAbstractFilter. Die Funktion ist dann auch schon der Filter und somit ist das Problem gelöst. Das ganze in den Plugins speichern und die Config Datei entsprechend anpassen und schon ist das Problem gelöst.

Raphael