我正在使用带有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
以后添加另一种语言时进行调整.