Question

我正在使用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，以便将模板系统保留为尽可能干。这些文件也需要多语言，这就是为什么我想在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

请注意缺少的引号。

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

多语种玉模板？

1 个答案: