Déclaration de contenu Par-Langue dans Intlayer

Intlayer prend en charge deux manières de déclarer du contenu multilingue :

• Un seul fichier avec toutes les traductions
• Un fichier par langue (format par-langue)

Cette flexibilité permet :

• Migration facile depuis d'autres outils i18n
• Support des flux de travail de traduction automatisés
• Organisation claire des traductions dans des fichiers distincts spécifiques à chaque langue

Fichier unique avec plusieurs traductions

Ce format est idéal pour :

• Itération rapide dans le code.
• Intégration fluide avec le CMS.

C'est l'approche recommandée pour la plupart des cas d'utilisation. Elle centralise les traductions, ce qui facilite l'itération et l'intégration avec le CMS.

import { t, type Dictionary } from "intlayer";

const helloWorldContent = {
  key: "hello-world",
  content: {
    multilingualContent: t({
      en: "Title of my component",
      es: "Título de mi componente",
    }),
  },
} satisfies Dictionary;

export default helloWorldContent;

Recommandé : Ce format est idéal lorsque vous utilisez l'éditeur visuel d'Intlayer ou que vous gérez les traductions directement dans le code.

Configuration globale pour les fichiers par locale

Vous pouvez configurer la configuration globale pour les fichiers par locale en ajoutant ce qui suit à votre fichier intlayer.config.ts :

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  dictionary: {    locale: Locales.ENGLISH,  },};export default config;

En utilisant cette configuration, tous les fichiers par locale seront générés avec la locale par défaut définie sur l'anglais. Cela inclut également la génération de fichiers .content à l'aide de la commande extract et du compilateur. (Voir Compilateur ou Extract pour plus d'informations.)

Format par locale

Ce format est utile lorsque :

• Vous souhaitez versionner ou remplacer les traductions de manière indépendante.
• Vous intégrez des flux de travail de traduction automatique ou humaine.

Vous pouvez également répartir les traductions dans des fichiers individuels par locale en spécifiant le champ locale :

import { t, Locales, type Dictionary } from "intlayer";

const helloWorldContent = {
  key: "hello-world",
  locale: Locales.SPANISH, // Important
  content: { multilingualContent: "Título de mi componente" }, // Texte original en espagnol conservé
} satisfies Dictionary;

export default helloWorldContent;

Important : Assurez-vous que le champ locale est défini. Il indique à Intlayer la langue que représente le fichier.

Remarque : Dans les deux cas, le fichier de déclaration de contenu doit suivre le modèle de nommage *.content.{ts,tsx,js,jsx,mjs,cjs,json} pour être reconnu par Intlayer. Le suffixe .[locale] est optionnel et utilisé uniquement comme convention de nommage.

Mélange des formats

Vous pouvez combiner les deux approches de déclaration pour la même clé de contenu. Par exemple :

• Déclarez votre contenu de base de manière statique dans un fichier comme index.content.ts.
• Ajoutez ou remplacez des traductions spécifiques dans des fichiers séparés tels que index.fr.content.ts ou index.content.json.

Cette configuration est particulièrement utile lorsque :

• Vous souhaitez définir la structure initiale du contenu dans le code.
• Vous prévoyez d'enrichir ou de compléter les traductions plus tard en utilisant le CMS ou des outils automatisés.

.└── Components    └── MyComponent        ├── index.content.ts        ├── index.content.json        └── index.ts

Exemple

Voici un fichier de déclaration de contenu multilingue :

import { t, type Dictionary } from "intlayer";const helloWorldContent = {  key: "hello-world",  locale: Locales.ENGLISH,  content: {    multilingualContent: "Titre de mon composant",    projectName: "Mon projet",  },} satisfies Dictionary;export default helloWorldContent;

{  "$schema": "https://intlayer.org/schema.json",  "key": "hello-world",  "content": {    "multilingualContent": {      "nodeType": "translation",      "translation": {        "fr": "Titre de mon composant",        "es": "Título de mi componente"      }    }  }}

Intlayer fusionne automatiquement les fichiers multilingues et par locale.

import { getIntlayer, Locales } from "intlayer";const intlayer = getIntlayer("hello-world"); // La locale par défaut est ANGLAIS, donc cela retournera le contenu en ANGLAISconsole.log(JSON.stringify(intlayer, null, 2));// Résultat :// {//  "multilingualContent": "Titre de mon composant",//  "projectName": "Mon projet"// }const intlayer = getIntlayer("hello-world", Locales.SPANISH);console.log(JSON.stringify(intlayer, null, 2));// Résultat :// {//  "multilingualContent": "Título de mi componente",//  "projectName": "Mon projet"// }const intlayer = getIntlayer("hello-world", Locales.FRENCH);console.log(JSON.stringify(intlayer, null, 2));// Résultat :// {//  "multilingualContent": "Titre de mon composant",//  "projectName": "Mon projet"// }

Génération automatique de traduction

Utilisez le intlayer CLI pour remplir automatiquement les traductions manquantes en fonction de vos services préférés.