多语种玉模板？

Question

我正在使用带有gulp,gulp-jade和gulp-data的Jade模板引擎,以两种语言构建一个非常基本的单页网站.结果应该是静态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

当我运行gulp时,这会导致以下错误:

Cannot read property 'foo' of undefined

我不介意将JSON拆分为每种语言的不同文件,如果这样可以使事情变得更容易,但我不知道如何从内部包含适当的文件index_en.jade.

一些背景:

我应该注意到我正在扩展一个默认布局文件(default.jade),它本身包含一些类似的东西,header.jade并且footer.jade尽可能地将模板系统保持为DRY.这些文件也需要多语言,这就是为什么我想lang="en"在my index_en.jade,lang="de"in中定义index_de.jade,并且只是传播到所有其他部分而不必复制那些(例如,没有header_de.jade或者这样).

我也正在将这些功能合并到我的yeoman生成器中,所以我想找到一个系统,我可以避免在gulpfile.js以后添加另一种语言时进行调整.

Answer 1

错误在于#{lang.foo}。您已将 lang 设置为一个字符串，并且其上没有 foo\xe2\x80\xa6 如果您将 lang 设置为您正在加载的实际对象（在本例中为 en 或 de），则它可以正常工作：

\n\n

extends /_layouts/default.jade\n\nblock content\n\n    - var lang = en\n\n    h1 #{lang.foo} // load text from json\n

\n\n

请注意缺少的引号。

\n\n

编辑：变量声明需要位于块内（有时）。

\n