多语言 Jade 模板？

Question

我将 Jade 模板引擎与 gulp、gulp-jade and 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_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 以保持模板系统尽可能干燥。这些文件也需要是多语言的，这就是为什么我想在我的 index_en.jade 中定义 lang="en"，在 index_de.jade 中定义 lang="de"，然后将其传播给所有人其他部分的一部分，而不必也复制它们（例如，没有 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

注意遗漏的引号。

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

多语言 Jade 模板？

Multilingual Jade templates?

json

node.js

gulp

pug