Aller au contenu principal
Version: Canary 🚧

Cycle de vie i18n

Les plugins utilisent ces cycles de vie pour charger les données liées à i18n.

getTranslationFiles({content})

Les plugins déclarent les fichiers de traduction JSON qu'ils veulent utiliser.

Retournee les fichiers de traduction {path: string, content: ChromeI18nJSON} :

  • path : relatif au dossier du plugin localisé i18n/[locale]/[pluginName]. L'extension .json doit être omise pour rester générique.
  • content : utilisation du format JSON pour Chrome i18n.

Ces fichiers seront écrits par le CLI write-translations dans le sous-dossier du plugin i18n, et sera lu dans la locale appropriée avant d'appeler translateContent() et translateThemeConfig()

Exemple :

my-plugin.js
export default function (context, options) {
return {
name: 'my-plugin',
async getTranslationFiles({content}) {
return [
{
path: 'sidebar-labels',
content: {
someSidebarLabel: {
message: 'Quelques libellés de la barre latérale',
description: 'Un libellé utilisé dans mon plugin dans la barre latérale',
},
someLabelFromContent: content.myLabel,
},
},
];
},
};
}

translateContent({content,translationFiles})

Traduit le contenu du plugin, en utilisant les fichiers de traduction localisés.

Retourne le contenu du plugin localisé.

Le cycle de vie de contentLoaded() sera appelé avec le contenu du plugin localisé retourné par translateContent().

Exemple :

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,
};
},
};
}

translateThemeConfig({themeConfig,translationFiles})

Traduit les libellés de themeConfig du site en utilisant les fichiers de traduction localisés.

Renvoie le themeConfig localisé.

Exemple :

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,
};
},
};
}

async getDefaultCodeTranslationMessages()

Les thèmes utilisant l'API <Translate> peuvent fournir des messages de traduction de code par défaut.

Il devrait retourner des messages dans Record<string, string>, où les clés sont les ID de traduction et les valeurs sont des messages (sans la description) localisés en utilisant la locale courante du site.

Exemple :

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