Erhalten Sie Benachrichtigungen über kommende Intlayer-Veröffentlichungen
    Erstellung:2025-03-13Letzte Aktualisierung:2025-09-20

    Übersetzungen der Deklarationsdatei für automatisches Ausfüllen von Inhalten

    Deklarationsdateien für automatisches Ausfüllen von Inhalten sind eine Möglichkeit, Ihren Entwicklungsworkflow zu beschleunigen.

    Der Mechanismus des automatischen Ausfüllens funktioniert durch eine Master-Slave-Beziehung zwischen Inhaltsdeklarationsdateien. Wenn die Hauptdatei (Master) aktualisiert wird, wendet Intlayer diese Änderungen automatisch auf die abgeleiteten (automatisch ausgefüllten) Deklarationsdateien an.

    src/components/example/example.content.ts
    import { Locales, type Dictionary } from "intlayer";const exampleContent = {  key: "example",  locale: Locales.ENGLISH,  autoFill: "./example.content.json",  content: {    contentExample: "Dies ist ein Beispielinhalt", // Beispielinhalt  },} satisfies Dictionary;export default exampleContent;

    Hier ist eine pro-Locale Inhaltsdeklarationsdatei mit der autoFill-Anweisung.

    Dann, wenn Sie den folgenden Befehl ausführen:

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

    Intlayer generiert automatisch die abgeleitete Deklarationsdatei unter src/components/example/example.content.json und füllt alle Lokalisierungen aus, die in der Hauptdatei noch nicht deklariert sind.

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

    Anschließend werden beide Deklarationsdateien zu einem einzigen Wörterbuch zusammengeführt, das über den Standard-useIntlayer("example") Hook (React) / Composable (Vue) zugänglich ist.

    Automatisch ausgefülltes Dateiformat

    Das empfohlene Format für automatisch ausgefüllte Deklarationsdateien ist JSON, da es Formatierungsbeschränkungen vermeidet. Intlayer unterstützt jedoch auch .ts, .js, .mjs, .cjs und andere Formate.

    src/components/example/example.content.ts
    const exampleContent = {  key: "example",  autoFill: "./example.filled.content.ts",  content: {    // Ihr Inhalt  },};

    Dies erzeugt die Datei unter:

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

    Die Generierung von .js, .ts und ähnlichen Dateien funktioniert wie folgt:

    • Wenn die Datei bereits existiert, analysiert Intlayer sie mithilfe des AST (Abstract Syntax Tree), um jedes Feld zu finden und fehlende Übersetzungen einzufügen.
    • Wenn die Datei nicht existiert, generiert Intlayer sie mit der Standardvorlage für Inhaltsdeklarationsdateien.

    Absolute Pfade

    Das Feld autoFill unterstützt auch absolute Pfade.

    src/components/example/example.content.ts
    const exampleContent = {  key: "example",  autoFill: "/messages/example.content.json",  content: {    // Ihr Inhalt  },};

    Dies erzeugt die Datei unter:

    /messages/example.content.json

    Automatische Generierung von Inhaltsdeklarationsdateien pro Locale

    Das Feld autoFill unterstützt auch die Generierung von pro Locale Inhaltsdeklarationsdateien.

    src/components/example/example.content.ts
    const exampleContent = {  key: "example",  autoFill: {    fr: "./example.fr.content.json",    es: "./example.es.content.json",  },  content: {    // Ihr Inhalt  },};

    Dies erzeugt zwei separate Dateien:

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

    In diesem Fall, wenn das Objekt nicht alle Sprachen enthält, überspringt Intlayer die Generierung der verbleibenden Sprachen.

    Filter für bestimmte Sprach-Autofill

    Die Verwendung eines Objekts für das Feld autoFill ermöglicht es Ihnen, Filter anzuwenden und nur bestimmte Sprachdateien zu generieren.

    src/components/example/example.content.ts
    const exampleContent = {  key: "example",  autoFill: {    fr: "./example.fr.content.json",  },  content: {    // Ihr Inhalt  },};

    Dies generiert nur die französische Übersetzungsdatei.

    Pfadvariablen

    Sie können Variablen im autoFill-Pfad verwenden, um die Zielpfade für die generierten Dateien dynamisch aufzulösen.

    Verfügbare Variablen:

    • {{locale}} – Sprachcode (z. B. fr, es)
    • {{fileName}} – Dateiname (z. B. index)
    • {{key}} – Wörterbuchschlüssel (z. B. example)
    src/components/example/index.content.ts
    const exampleContent = {  key: "example",  autoFill: "/messages/{{locale}}/{{key}}.content.json",  content: {    // Ihr Inhalt  },};

    Dies erzeugt:

    • /messages/fr/example.content.json
    • /messages/es/example.content.json
    src/components/example/index.content.ts
    const exampleContent = {  key: "example",  autoFill: "./{{fileName}}.content.json",  content: {    // Ihr Inhalt  },};

    Dies erzeugt:

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

    Dokumentationsverlauf

    Version Datum Änderungen
    6.0.0 2025-09-20 Globale Konfiguration hinzugefügt
    6.0.0 2025-09-17 Variable {{fileName}} hinzugefügt
    5.5.10 2025-06-29 Historie initialisiert
    Erhalten Sie Benachrichtigungen über kommende Intlayer-Veröffentlichungen