Can Nunjucks output files in multiple languages

Question

I'm trying to create a multi language page, I was hoping to use different json files for different languages and have gulp output the files with a language suffix in the file name.

So far I've loaded a data file, and cannot output a single object from that file, I can only go through all of it with nunjuks {for item in obj}.

What I need to do is output each object separately and output two different files for each language.

This is the english file, the french one is the same only it has french text:

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

This is the gulp task:

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(''));
});

And this is how I thought I could output the value of "hello" in the template files but it does not work:

{{hello}}

You need two curly braces on each side to render a variable in Nunjucks: `{{ hello }}` I'm not clear on the outcome you're wanting with your JSON and Nunjucks files. You want to output a JSON file and an HTML file for each language? — Kevin Powell, Aug 28 '17 at 12:36
I figured it out, I'll answer my own question, all I had to do was to create two separate Gulp tasks for each language, each task using the right language json file. — Ioan-Radu Tanasescu, Aug 28 '17 at 15:06

score 0 · Answer 1 · answered Aug 28 '17 at 15:12

Outputting two different html files for each language while using the same template file is easy, you just need to create two Gulp tasks for rendering html files from nunjucks, one task for each language.

Using gulp-rename you can simply add a suffix with the language code to the file name:

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(''));
});

Can Nunjucks output files in multiple languages

1 Answers1