Le mécanisme de remplissage automatique fonctionne via une relation maître-esclave entre les fichiers de déclaration de contenu. Lorsque le fichier principal (maître) est mis à jour, Intlayer applique automatiquement ces modifications aux fichiers de déclaration dérivés (remplis automatiquement).

src/components/example/example.content.ts

Copier le code

Copier le code dans le presse-papiers

import { Locales, type Dictionary } from "intlayer";const exampleContent = {  key: "example",  locale: Locales.ENGLISH,  autoFill: "./example.content.json",  content: {    contentExample: "Ceci est un exemple de contenu", // Exemple de contenu  },} satisfies Dictionary;export default exampleContent;

Voici un fichier de déclaration de contenu par langue utilisant l'instruction autoFill.

Ensuite, lorsque vous exécutez la commande suivante :

bash

Copier le code

Copier le code dans le presse-papiers

npx intlayer fill --file 'src/components/example/example.content.ts'

Intlayer générera automatiquement le fichier de déclaration dérivé à src/components/example/example.content.json, en remplissant toutes les locales non déjà déclarées dans le fichier principal.

src/components/example/example.content.json

Copier le code

Copier le code dans le presse-papiers

{  "key": "example",  "content": {    "contentExample": {      "nodeType": "translation",      "translation": {        "fr": "Ceci est un exemple de contenu",        "es": "Este es un ejemplo de contenido",      },    },  },}

Ensuite, les deux fichiers de déclaration seront fusionnés en un seul dictionnaire, accessible via le hook standard useIntlayer("example") (react) / composable (vue).

Format du fichier rempli automatiquement

Le format recommandé pour les fichiers de déclaration remplis automatiquement est JSON, ce qui permet d'éviter les contraintes de formatage. Cependant, Intlayer prend également en charge les formats .ts, .js, .mjs, .cjs et d'autres.

src/components/example/example.content.ts

Copier le code

Copier le code dans le presse-papiers

const exampleContent = {  key: "example",  autoFill: "./example.filled.content.ts",  content: {    // Votre contenu  },};

Cela générera le fichier à l'emplacement suivant :

plaintext

Copier le code

Copier le code dans le presse-papiers

src/components/example/example.filled.content.ts

La génération des fichiers .js, .ts et similaires fonctionne comme suit :

Si le fichier existe déjà, Intlayer l'analysera en utilisant l'AST (Abstract Syntax Tree) pour localiser chaque champ et insérer les traductions manquantes.
Si le fichier n'existe pas, Intlayer le générera en utilisant le modèle de fichier de déclaration de contenu par défaut.

Chemins Absolus

Le champ autoFill supporte également les chemins absolus.

src/components/example/example.content.ts

Copier le code

Copier le code dans le presse-papiers

const exampleContent = {  key: "example",  autoFill: "/messages/example.content.json",  content: {    // Votre contenu  },};

Cela générera le fichier à l'emplacement :

plaintext

Copier le code

Copier le code dans le presse-papiers

/messages/example.content.json

Génération Automatique de Fichiers de Déclaration de Contenu Par Locale

Le champ autoFill supporte également la génération de fichiers de déclaration de contenu par locale.

src/components/example/example.content.ts

Copier le code

Copier le code dans le presse-papiers

const exampleContent = {  key: "example",  autoFill: {    fr: "./example.fr.content.json",    es: "./example.es.content.json",  },  content: {    // Votre contenu  },};

Cela générera deux fichiers séparés :

src/components/example/example.fr.content.json
src/components/example/example.es.content.json

Dans ce cas, si l'objet ne contient pas toutes les locales, Intlayer ignore la génération des locales restantes.

Filtrer le remplissage automatique pour une locale spécifique

Utiliser un objet pour le champ autoFill vous permet d'appliquer des filtres et de générer uniquement certains fichiers de locale.

src/components/example/example.content.ts

Copier le code

Copier le code dans le presse-papiers

const exampleContent = {  key: "example",  autoFill: {    fr: "./example.fr.content.json",  },  content: {    // Votre contenu  },};

Cela ne générera que le fichier de traduction français.

Variables de chemin

Vous pouvez utiliser des variables dans le chemin autoFill pour résoudre dynamiquement les chemins cibles des fichiers générés.

Variables disponibles :

{{locale}} – Code de la locale (ex. fr, es)
{{fileName}} – Nom du fichier (ex. index)
{{key}} – Clé du dictionnaire (ex. example)

src/components/example/index.content.ts

Copier le code

Copier le code dans le presse-papiers

const exampleContent = {  key: "example",  autoFill: "/messages/{{locale}}/{{key}}.content.json",  content: {    // Votre contenu  },};

Cela générera :

/messages/fr/example.content.json
/messages/es/example.content.json

src/components/example/index.content.ts

Copier le code

Copier le code dans le presse-papiers

const exampleContent = {  key: "example",  autoFill: "./{{fileName}}.content.json",  content: {    // Votre contenu  },};

Cela générera :

./index.content.json
./index.content.json

Compilateur

Tests

Création:2025-03-13Dernière mise à jour:2025-09-20

Référencez cette doc à votre assistant AI préféré

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Posez votre question et obtenez un résumé du document en referencant cette page et le Provider AI de votre choix

Historique des versions

"Ajout de la configuration globale"
v6.0.020/09/2025
"Ajout de la variable `{{fileName}}`"
v6.0.017/09/2025
"Historique initial"
v5.5.1029/06/2025

Le contenu de cette page a été traduit à l'aide d'une IA.

Voir la dernière version du contenu original en anglais

Modifier cette documentation

Si vous avez une idée d’amélioration pour améliorer cette documentation, n’hésitez pas à contribuer en submitant une pull request sur GitHub.

Lien GitHub de la documentation

Copier

Copier le Markdown du doc dans le presse-papiers

Traductions des fichiers de déclaration de contenu avec remplissage automatique

Les fichiers de déclaration de contenu avec remplissage automatique sont un moyen d'accélérer votre flux de travail de développement.

src/components/example/example.content.ts

Copier le code

Copier le code dans le presse-papiers

import { Locales, type Dictionary } from "intlayer";const exampleContent = {  key: "example",  locale: Locales.ENGLISH,  autoFill: "./example.content.json",  content: {    contentExample: "Ceci est un exemple de contenu", // Exemple de contenu  },} satisfies Dictionary;export default exampleContent;

import { Locales, type Dictionary } from "intlayer";const exampleContent = {  key: "example",  locale: Locales.ENGLISH,  autoFill: "./example.content.json",  content: {    contentExample: "Ceci est un exemple de contenu", // Exemple de contenu  },} satisfies Dictionary;export default exampleContent;

Voici un fichier de déclaration de contenu par langue utilisant l'instruction autoFill.

Ensuite, lorsque vous exécutez la commande suivante :

bash

Copier le code

Copier le code dans le presse-papiers

npx intlayer fill --file 'src/components/example/example.content.ts'

npx intlayer fill --file 'src/components/example/example.content.ts'

src/components/example/example.content.json

Copier le code

Copier le code dans le presse-papiers

{  "key": "example",  "content": {    "contentExample": {      "nodeType": "translation",      "translation": {        "fr": "Ceci est un exemple de contenu",        "es": "Este es un ejemplo de contenido",      },    },  },}

{  "key": "example",  "content": {    "contentExample": {      "nodeType": "translation",      "translation": {        "fr": "Ceci est un exemple de contenu",        "es": "Este es un ejemplo de contenido",      },    },  },}

Ensuite, les deux fichiers de déclaration seront fusionnés en un seul dictionnaire, accessible via le hook standard useIntlayer("example") (react) / composable (vue).

Format du fichier rempli automatiquement

src/components/example/example.content.ts

Copier le code

Copier le code dans le presse-papiers

const exampleContent = {  key: "example",  autoFill: "./example.filled.content.ts",  content: {    // Votre contenu  },};

const exampleContent = {  key: "example",  autoFill: "./example.filled.content.ts",  content: {    // Votre contenu  },};

Cela générera le fichier à l'emplacement suivant :

plaintext

Copier le code

Copier le code dans le presse-papiers

src/components/example/example.filled.content.ts

src/components/example/example.filled.content.ts

La génération des fichiers .js, .ts et similaires fonctionne comme suit :

Si le fichier existe déjà, Intlayer l'analysera en utilisant l'AST (Abstract Syntax Tree) pour localiser chaque champ et insérer les traductions manquantes.
Si le fichier n'existe pas, Intlayer le générera en utilisant le modèle de fichier de déclaration de contenu par défaut.

Chemins Absolus

Le champ autoFill supporte également les chemins absolus.

src/components/example/example.content.ts

Copier le code

Copier le code dans le presse-papiers

const exampleContent = {  key: "example",  autoFill: "/messages/example.content.json",  content: {    // Votre contenu  },};

const exampleContent = {  key: "example",  autoFill: "/messages/example.content.json",  content: {    // Votre contenu  },};

Cela générera le fichier à l'emplacement :

plaintext

Copier le code

Copier le code dans le presse-papiers

/messages/example.content.json

/messages/example.content.json

Génération Automatique de Fichiers de Déclaration de Contenu Par Locale

Le champ autoFill supporte également la génération de fichiers de déclaration de contenu par locale.

src/components/example/example.content.ts

Copier le code

Copier le code dans le presse-papiers

const exampleContent = {  key: "example",  autoFill: {    fr: "./example.fr.content.json",    es: "./example.es.content.json",  },  content: {    // Votre contenu  },};

const exampleContent = {  key: "example",  autoFill: {    fr: "./example.fr.content.json",    es: "./example.es.content.json",  },  content: {    // Votre contenu  },};

Cela générera deux fichiers séparés :

src/components/example/example.fr.content.json
src/components/example/example.es.content.json

Dans ce cas, si l'objet ne contient pas toutes les locales, Intlayer ignore la génération des locales restantes.

Filtrer le remplissage automatique pour une locale spécifique

Utiliser un objet pour le champ autoFill vous permet d'appliquer des filtres et de générer uniquement certains fichiers de locale.

src/components/example/example.content.ts

Copier le code

Copier le code dans le presse-papiers

const exampleContent = {  key: "example",  autoFill: {    fr: "./example.fr.content.json",  },  content: {    // Votre contenu  },};

const exampleContent = {  key: "example",  autoFill: {    fr: "./example.fr.content.json",  },  content: {    // Votre contenu  },};

Cela ne générera que le fichier de traduction français.

Variables de chemin

Vous pouvez utiliser des variables dans le chemin autoFill pour résoudre dynamiquement les chemins cibles des fichiers générés.

Variables disponibles :

{{locale}} – Code de la locale (ex. fr, es)
{{fileName}} – Nom du fichier (ex. index)
{{key}} – Clé du dictionnaire (ex. example)

src/components/example/index.content.ts

Copier le code

Copier le code dans le presse-papiers

const exampleContent = {  key: "example",  autoFill: "/messages/{{locale}}/{{key}}.content.json",  content: {    // Votre contenu  },};

const exampleContent = {  key: "example",  autoFill: "/messages/{{locale}}/{{key}}.content.json",  content: {    // Votre contenu  },};

Cela générera :

/messages/fr/example.content.json
/messages/es/example.content.json

src/components/example/index.content.ts

Copier le code

Copier le code dans le presse-papiers

const exampleContent = {  key: "example",  autoFill: "./{{fileName}}.content.json",  content: {    // Votre contenu  },};

const exampleContent = {  key: "example",  autoFill: "./{{fileName}}.content.json",  content: {    // Votre contenu  },};

Cela générera :

./index.content.json
./index.content.json

Compilateur

Tests