Dateiinhalte / Einbetten von Dateien in Intlayer

Wie das Einbetten von Dateien funktioniert

In Intlayer ermöglicht die Funktion file das Einbetten von externen Dateiinhalten in ein Wörterbuch. Dieser Ansatz stellt sicher, dass Intlayer die Quelldatei erkennt, was eine nahtlose Integration mit dem Intlayer Visual Editor und CMS ermöglicht. Im Gegensatz zu direkten import-, require- oder fs-Dateilesemethoden verknüpft die Verwendung von file die Datei mit dem Wörterbuch, sodass Intlayer den Inhalt dynamisch verfolgen und aktualisieren kann, wenn die Datei bearbeitet wird.

Einrichten von Dateiinhalten

Um Dateiinhalte in Ihrem Intlayer-Projekt einzubetten, verwenden Sie die Funktion file in einem Inhaltsmodul. Nachfolgend finden Sie Beispiele, die verschiedene Implementierungen demonstrieren.

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

const myFileContent = {
  key: "my_key",
  content: {
    myFile: file("./path/to/file.txt"),
  },
} satisfies Dictionary;

export default myFileContent;

Verwendung von Dateiinhalt in React Intlayer

Um eingebetteten Dateiinhalt in einer React-Komponente zu verwenden, importieren Sie den useIntlayer Hook aus dem react-intlayer Paket. Dieser ruft den Inhalt des angegebenen Schlüssels ab und ermöglicht die dynamische Anzeige.

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const FileComponent: FC = () => {
  const { myFile } = useIntlayer("my_key");

  return (
    <div>
      <pre>{myFile}</pre>
    </div>
  );
};

export default FileComponent;

Mehrsprachiges Markdown-Beispiel

Um mehrsprachige, editierbare Markdown-Dateien zu unterstützen, können Sie file in Kombination mit t() und md() verwenden, um verschiedene Sprachversionen einer Markdown-Inhaltsdatei zu definieren.

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

const myMultilingualContent = {
  key: "my_multilingual_key",
  content: {
    myContent: md(
      t({
        en: file("src/components/test.en.md"),
        fr: file("src/components/test.fr.md"),
        es: file("src/components/test.es.md"),
      })
    ),
  },
} satisfies Dictionary;

export default myMultilingualContent;

Diese Einrichtung ermöglicht es, den Inhalt dynamisch basierend auf der Sprachpräferenz des Benutzers abzurufen. Wenn sie im Intlayer Visual Editor oder CMS verwendet wird, erkennt das System, dass der Inhalt aus den angegebenen Markdown-Dateien stammt und stellt sicher, dass diese weiterhin bearbeitbar bleiben.

Wie Intlayer mit Datei-Inhalten umgeht

Die file-Funktion basiert auf dem fs-Modul von Node.js, um den Inhalt der angegebenen Datei zu lesen und in das Wörterbuch einzufügen. Wenn sie in Verbindung mit dem Intlayer Visual Editor oder CMS verwendet wird, kann Intlayer die Beziehung zwischen dem Wörterbuch und der Datei verfolgen. Dies ermöglicht Intlayer:

• Zu erkennen, dass der Inhalt aus einer bestimmten Datei stammt.
• Den Wörterbuchinhalt automatisch zu aktualisieren, wenn die verknüpfte Datei bearbeitet wird.
• Sicherstellung der Synchronisation zwischen der Datei und dem Wörterbuch, um die Integrität des Inhalts zu bewahren.

Zusätzliche Ressourcen

Für weitere Details zur Konfiguration und Verwendung der Dateieinbettung in Intlayer verweisen wir auf die folgenden Ressourcen:

• Intlayer CLI Dokumentation
• React Intlayer Dokumentation
• Next Intlayer Dokumentation
• Markdown Inhaltsdokumentation
• Übersetzungsinhaltsdokumentation

Diese Ressourcen bieten weitere Einblicke in die Dateieinbettung, Inhaltsverwaltung und die Integration von Intlayer mit verschiedenen Frameworks.