Question

我正在尝试创建一个多语言页面，我希望为不同的语言使用不同的json文件，并且gulp输出文件名中带有语言后缀的文件。

到目前为止，我已经加载了一个数据文件，并且无法从该文件中输出单个对象，我只能通过nunjuks {for item in obj}完成所有这些操作。

我需要做的是分别输出每个对象，并为每种语言输出两个不同的文件。

这是英文文件，法文版只有法文文本：

{
    "hello": "Hello",
    "title": "Awesome Website"
}

这是gulp任务：

gulp.task('nunjucks', function() {
    return gulp.src('source/pages/**/*.nunjucks')
    .pipe(data(function() {
      return require('./source/en.json');
    }))
    .pipe(nunjucksRender({
        path: ['source/templates'],
        manageEnv: manageEnvironment
    }))
    .on('error', onError)
    // output files in app folder
    .pipe(gulp.dest(''));
});

这就是我认为我可以在模板文件中输出“hello”的值，但它不起作用：

{{hello}}

Answer 1

使用相同的模板文件为每种语言输出两个不同的html文件很简单，你只需要创建两个Gulp任务来渲染来自nunjucks的html文件，每种语言都有一个任务。

使用gulp-rename，您只需添加带语言代码的后缀到文件名：

gulp.task('nunjucks-en', function() {
    return gulp.src('source/pages/**/*.nunjucks')
    .pipe(data(function() {
      return require('./source/en.json');
    }))
    .pipe(nunjucksRender({
        path: ['source/templates'],
        manageEnv: manageEnvironment
    }))
    .on('error', onError)
    // output files in app folder
    .pipe(gulp.dest(''));
});

gulp.task('nunjucks-fr', function() {
    return gulp.src('source/pages/**/*.nunjucks')
    .pipe(data(function() {
      return require('./source/fr.json');
    }))
    .pipe(nunjucksRender({
        path: ['source/templates'],
        manageEnv: manageEnvironment
    }))
    .pipe(rename(function (path) {
      path.basename += '-fr'
    }))
    .on('error', onError)
    // output files in app folder
    .pipe(gulp.dest(''));
});

Nunjucks可以输出多种语言的文件

1 个答案: