Der Inhalt dieser Seite wurde mit einer KI übersetzt.
Den englischen Originaltext ansehenWie das Einfügen funktioniert
In Intlayer wird das Einfügen von Inhalten durch die Funktion insertion erreicht, die Platzhalterfelder in einem String (wie {{name}} oder {{age}}) identifiziert, die zur Laufzeit dynamisch ersetzt werden können. Dieser Ansatz ermöglicht es Ihnen, flexible, vorlagenähnliche Strings zu erstellen, bei denen spezifische Teile des Inhalts durch Daten aus Ihrer Anwendung bestimmt werden.
Wenn Sie React Intlayer oder Next Intlayer integrieren, können Sie einfach das Datenobjekt bereitstellen, das die Werte für jeden Platzhalter enthält, und Intlayer rendert den Inhalt automatisch mit den ersetzten Platzhaltern.
Einrichtung von Einfügeinhalten
Um Einfügeinhalte in Ihrem Intlayer-Projekt einzurichten, erstellen Sie ein Inhaltsmodul, das Ihre Einfügedefinitionen enthält. Nachfolgend finden Sie Beispiele in verschiedenen Formaten.
import { insert, type Dictionary } from "intlayer";const myInsertionContent = { key: "my_key", content: { myInsertion: insert( "Hallo, mein Name ist {{name}} und ich bin {{age}} Jahre alt!" ), },} satisfies Dictionary;export default myInsertionContent;
Verwendung von Einfügeinhalten mit React Intlayer
Um Einfügeinhalte in einer React-Komponente zu verwenden, importieren und verwenden Sie den useIntlayer-Hook aus dem Paket react-intlayer. Dieser Hook ruft den Inhalt für den angegebenen Schlüssel ab und ermöglicht es Ihnen, ein Objekt zu übergeben, das jeden Platzhalter in Ihrem Inhalt mit dem Wert abbildet, den Sie anzeigen möchten.
import type { FC } from "react";import { useIntlayer } from "react-intlayer";const InsertionComponent: FC = () => { const { myInsertion } = useIntlayer("my_key"); return ( <div> <p> { /* Ausgabe: "Hallo, mein Name ist John und ich bin 30 Jahre alt!" */ myInsertion({ name: "John", age: "30" }) } </p> <p> { /* Sie können dieselbe Einfügung mit unterschiedlichen Werten wiederverwenden */ myInsertion({ name: "Alice", age: "25" }) } </p> </div> );};export default InsertionComponent;
Zusätzliche Ressourcen
Für detailliertere Informationen zur Konfiguration und Nutzung finden Sie in den folgenden Ressourcen:
Diese Ressourcen bieten weitere Einblicke in die Einrichtung und Nutzung von Intlayer in verschiedenen Umgebungen und Frameworks.
Wenn Sie eine Idee haben, um diese Dokumentation zu verbessern, zögern Sie bitte nicht, durch das Einreichen eines Pull-Requests auf GitHub beizutragen.
GitHub-Link zur Dokumentation