Многоязычные шаблоны Jade?

Question

Я использую механизм шаблонов Jade с gulp, gulp-jade и gulp-data, чтобы создать очень простой одностраничный сайт на двух языках. Результатом должны быть статические HTML-документы без дальнейшей обработки на стороне сервера или на стороне клиента. Можно ли загружать содержимое веб-сайта из файла JSON в зависимости от языка, который я определяю в своем index.jade, и что было бы лучшим способом сделать это?

Моя текущая попытка вызывает ошибку:

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 

Это приводит к следующей ошибке при запуске глотки:

Cannot read property 'foo' of undefined 

Я не возражаю дробя JSON в различные файлы на язык, если это делает вещи проще, но я понятия не имею, как я будет включать соответствующий файл с index_en.jade.

Некоторые контекст:

Я должен отметить, что я простирающийся файл схемы по умолчанию (default.jade), которая сама по себе включает в себя кучу вещей, как header.jade и footer.jade, чтобы сохранить систему шаблонов как можно более сухой. Эти файлы должны быть также многоязычными, поэтому я хотел бы определить в моих index_en.jade, lang="de" в index_de.jade и просто передать это всем остальным частицам без необходимости их дублирования (например, нет header_de.jade или например).

Я также объединять эти функции обратно в мой yeoman generator, поэтому я хотел бы найти систему, в которой я могу избежать необходимости корректировать gulpfile.js, если позже я добавлю другой язык.

Answer 1

Ошибка лежит в #{lang.foo}. Вы установили lang в строку, и на ней нет foo ... Если вы установите lang на фактический объект, который вы загружаете (en или de в этом случае), он отлично работает:

extends /_layouts/default.jade 

block content 

    - var lang = en 

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

Обратите внимание на недостающие кавычки.

Редактировать: объявление переменной должно быть внутри блока (иногда).