json - 多语言 Jade 模板？

Question

我正在使用带有 gulp 的 Jade 模板引擎，gulp-jade和 gulp-data用两种语言建立一个非常基本的单页网站。结果应该是静态 HTML 文档，没有进一步的服务器端或客户端处理。是否可以根据我在 index.jade 中定义的语言从 JSON 文件加载网站内容，最好的方法是什么？

我当前的尝试导致错误:

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_zh.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尽可能保持模板系统干燥。这些文件也需要是多语言的，这就是为什么我想定义 lang="en"在我的 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

注意缺少的引号。

编辑:变量声明需要在 block 内(有时)。