Mehrsprachige Jade-Vorlagen?

Question

Ich benutze die Jade-Vorlage-Engine mit Schluck, gulp-jade und gulp-data, um eine sehr einfache einseitige Website in zwei Sprachen zu erstellen. Das Ergebnis sollten statische HTML-Dokumente ohne weitere serverseitige oder clientseitige Verarbeitung sein. Ist es möglich, Webseiteninhalte aus einer JSON-Datei zu laden, abhängig von einer Sprache, die ich in meiner index.jade definiere, und was wäre der beste Weg, dies zu tun?

Mein aktueller Versuch einen Fehler verursacht:

gulpfile.js:

gulp.task('views', function() { 
    return gulp.src('app/**/*.jade') 
    .pipe($.data(function(file) { 
     return require('./app/data/text.json'); // load language file 
    })) 
    .pipe($.jade({pretty: true, basedir: 'app/'})) 
    .pipe(gulp.dest('.tmp')); 
}); 

text.json:

{ 
    "de": { 
    "foo": "deutsch" 
    }, 

    "en": { 
    "foo": "english" 
    } 
} 

index_en.jade:

extends /_layouts/default.jade 

var lang = "en" 

block content 

    h1 #{lang.foo} // load text from json 

Daraus ergibt sich die folgende Fehlermeldung, wenn ich schluck laufen:

Cannot read property 'foo' of undefined 

Ich habe nichts dagegen die JSON in verschiedene Dateien pro Sprache nicht Aufspaltung, wenn diese Dinge einfacher macht, aber ich habe keine Ahnung, wie ich würde die entsprechende Datei aus index_en.jade enthalten.

Einige Kontext:

Ich sollte anmerken, dass ich ein Standard-Layout-Datei (default.jade) bin erstreckt, die sich ein paar Dinge wie header.jade und footer.jade beinhaltet das Template-System so trocken wie möglich zu halten. Diese Dateien müssten auch mehrsprachig sein, weshalb ich lang="en" in meinem index_en.jade, lang="de" in index_de.jade definieren möchte, und dies auch auf alle anderen Teiltöne übertragen, ohne diese ebenfalls duplizieren zu müssen (z. B. keine header_de.jade oder eine solche).

Ich füge diese Funktionen auch zurück in meine yeoman generator, also würde ich gerne ein System finden, wo ich vermeiden kann, gulpfile.js anzupassen, wenn ich später eine andere Sprache hinzufügen würde.

Answer 1

Der Fehler liegt in #{lang.foo}. Sie haben lang auf eine Zeichenkette eingestellt und haben kein foo darauf ... Wenn Sie lang auf das tatsächlich geladene Objekt (in diesem Fall de oder de) setzen, funktioniert es einwandfrei:

extends /_layouts/default.jade 

block content 

    - var lang = en 

    h1 #{lang.foo} // load text from json 

Beachten Sie die fehlenden Anführungszeichen.

Bearbeiten: Variablendeklaration muss innerhalb Block (manchmal) sein.