多语言翡翠模板？答案

【问题标题】：Multilingual Jade templates?多语言翡翠模板？
【发布时间】：2016-03-09 12:57:07
【问题描述】：

我正在使用带有 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_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。这些文件也需要是多语言的，这就是为什么我想在我的index_en.jade 中定义lang="en"，在index_de.jade 中定义lang="de"，并且只需将其传播到所有其他部分而不必复制那些也是如此（例如，没有header_de.jade 或类似的）。

我还将这些功能重新合并到我的yeoman generator 中，所以我想找到一个系统，这样我可以避免在以后添加另一种语言时调整gulpfile.js。

【问题讨论】：

标签： json node.js gulp pug

【解决方案1】：

错误在于#{lang.foo}。您已将 lang 设置为一个字符串，但上面没有 foo...

extends /_layouts/default.jade

block content

    - var lang = en

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

注意缺少的引号。

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

【讨论】：

完美，谢谢。字符串和块范围都是一个问题。