Skip to main content
Docusaurus

Search documentation

Type to search this documentation.

On this pageOverview

I18n lifecycles

Plugins use these lifecycles to load i18n-related data.

Plugins declare the JSON translation files they want to use.

Returns translation files {path: string, content: ChromeI18nJSON}:

  • path: relative to the plugin localized folder i18n/[locale]/[pluginName]. Extension .json should be omitted to remain generic.
  • content: using the Chrome i18n JSON format.

These files will be written by the write-translations CLI to the plugin i18n subfolder, and will be read in the appropriate locale before calling translateContent() and translateThemeConfig()

Example:

my-plugin.js
export default function (context, options) {  return {    name: 'my-plugin',    async getTranslationFiles({content}) {      return [        {          path: 'sidebar-labels',          content: {            someSidebarLabel: {              message: 'Some Sidebar Label',              description: 'A label used in my plugin in the sidebar',            },            someLabelFromContent: content.myLabel,          },        },      ];    },  };}

Translate the plugin content, using the localized translation files.

Returns the localized plugin content.

The contentLoaded() lifecycle will be called with the localized plugin content returned by translateContent().

Example:

my-plugin.js
export default function (context, options) {  return {    name: 'my-plugin',    translateContent({content, translationFiles}) {      const myTranslationFile = translationFiles.find(        (f) => f.path === 'myTranslationFile',      );      return {        ...content,        someContentLabel: myTranslationFile.someContentLabel.message,      };    },  };}

Translate the site themeConfig labels, using the localized translation files.

Returns the localized themeConfig.

Example:

my-plugin.js
export default function (context, options) {  return {    name: 'my-theme',    translateThemeConfig({themeConfig, translationFiles}) {      const myTranslationFile = translationFiles.find(        (f) => f.path === 'myTranslationFile',      );      return {        ...themeConfig,        someThemeConfigLabel: myTranslationFile.someThemeConfigLabel.message,      };    },  };}

Themes using the <Translate> API can provide default code translation messages.

It should return messages in Record<string, string>, where keys are translation IDs and values are messages (without the description) localized using the site's current locale.

Example:

my-plugin.js
export default function (context, options) {  return {    name: 'my-theme',    async getDefaultCodeTranslationMessages() {      return readJsonFile(`${context.i18n.currentLocale}.json`);    },  };}
Suggest an edit

Propose a replacement for this page. The site team reviews it before applying any changes.

Export
Documentation menu