Skip to content

mgascoyne/nunjucks-translation

Repository files navigation

Nunjucks Translation

Build NPM Version NPM Downloads

Nunjucks extension for translation. With this you can use the trans and endtrans tags or the trans filter.

How to install it?

$ npm install nunjucks-translation

How to use it?

Example using static translations

import { TranslationExtension } from 'nunjucks-translation';

const translationExtension = new TranslationExtension({
  translations: {
    de: {
      message: {
        hello1: 'Hallo',
        hello2: 'Hallo {name}',
      },
    },
    en: {
      message: {
        hello1: 'Hello',
        hello2: 'Hello {name}',
      }
    },
  },
  locale: 'de',
  fallbackLocale: 'en',
});

nunjucksEnv.addExtension('translation-extension', translationExtension);
nunjucksEnv.addFilter('trans', (textId: string, locale: string, params: object) =>
  translationExtension.translateText(textId, locale, params),
);

Example using translations from JSON file:

import * as fs from 'fs';
import { TranslationExtension } from 'nunjucks-translation';

const translationExtension = new TranslationExtension(
  JSON.parse(
    fs.readFileSync('/path/to/translation.json', 'utf8'),
  )  
);

nunjucksEnv.addExtension('translation-extension', translationExtension);
nunjucksEnv.addFilter('trans', (textId: string, locale: string, params: object) =>
  translationExtension.translateText(textId, locale, params),
);

Translate content using tags

You can use the trans and endtrans tags to translate your content.

<html>
  <head>
  </head>
  <body>
    {% trans('de') %}message.hello1{% endtrans %} // result will be "Hallo"
    {% trans('en') %}message.hello1{% endtrans %} // result will be "Hello"
    {% trans('de', { name: 'John Doe' }) %}message.hello2{% endtrans %} // result will be "Hallo John Doe"
    {% trans('de', { name: 'John Doe' }) %}message.hello2{% endtrans %} // result will be "Hello John Doe"

    {% trans(null) %}message.hello1{% endtrans %} // result will be "Hallo" due to default locale
    {% trans('es') %}message.hello1{% endtrans %} // result will be "Hello" due to fallback locale
  </body>
</html>

Translate content using filter

You can also use the trans filter to translate your content.

<html>
  <head>
  </head>
  <body>
    {{ 'message.hello1'|trans('de') }} // result will be "Hallo"
    {{ 'message.hello1'|trans('en') }} // result will be "Hello"
    {{ 'message.hello2'|trans('de', { name: 'John Doe' }) }} // result will be "Hallo John Doe"
    {{ 'message.hello2'|trans('en', { name: 'John Doe' }) }} // result will be "Hello John Doe"

    {{ 'message.hello1'|trans(null) }} // result will be "Hallo" due to default locale
    {{ 'message.hello1'|trans('es) }} // result will be "Hello" due to fallback locale
  </body>
</html>

About

Nunjucks Extension and Filter for Translation

Resources

License

Stars

Watchers

Forks

Packages

No packages published