Skip to content

condition.md

Latest commit

 

History

History
119 lines (99 loc) · 4.06 KB

condition.md

File metadata and controls

119 lines (99 loc) · 4.06 KB
createdAt 2025-02-07
updatedAt 2025-06-29
title Bedingte Inhalte
description Erfahren Sie, wie Sie bedingte Inhalte in Intlayer nutzen können, um Inhalte dynamisch basierend auf bestimmten Bedingungen anzuzeigen. Folgen Sie dieser Dokumentation, um Bedingungen effizient in Ihr Projekt zu integrieren.
keywords
Bedingte Inhalte
Dynamische Darstellung
Dokumentation
Intlayer
Next.js
JavaScript
React
slugs
doc
concept
content
condition

Bedingter Inhalt / Bedingung in Intlayer

Wie Bedingung funktioniert

In Intlayer wird bedingter Inhalt durch die cond-Funktion erreicht, die spezifische Bedingungen (typischerweise boolesche Werte) ihren entsprechenden Inhalten zuordnet. Dieser Ansatz ermöglicht es Ihnen, Inhalte dynamisch basierend auf einer gegebenen Bedingung auszuwählen. Wenn es mit React Intlayer oder Next Intlayer integriert ist, wird der entsprechende Inhalt automatisch gemäß der zur Laufzeit bereitgestellten Bedingung ausgewählt.

Einrichten von bedingtem Inhalt

Um bedingten Inhalt in Ihrem Intlayer-Projekt einzurichten, erstellen Sie ein Inhaltsmodul, das Ihre bedingten Definitionen enthält. Nachfolgend finden Sie Beispiele in verschiedenen Formaten.

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

const myConditionalContent = {
  key: "my_key",
  content: {
    myCondition: cond({
      true: "mein Inhalt, wenn es wahr ist",
      false: "mein Inhalt, wenn es falsch ist",
      fallback: "mein Inhalt, wenn die Bedingung fehlschlägt", // Optional
    }),
  },
} satisfies Dictionary;

export default myConditionalContent;
{
  "$schema": "https://intlayer.org/schema.json",
  "key": "my_key",
  "content": {
    "myCondition": {
      "nodeType": "condition",
      "condition": {
        "true": "mein Inhalt, wenn es wahr ist",
        "false": "mein Inhalt, wenn es falsch ist",
        "fallback": "mein Inhalt, wenn die Bedingung fehlschlägt", // Optional
      },
    },
  },
}

Wenn kein Fallback deklariert ist, wird der zuletzt deklarierte Schlüssel als Fallback verwendet, falls die Bedingung nicht erfüllt ist.

Verwendung von bedingtem Inhalt mit React Intlayer

Um bedingten Inhalt innerhalb einer React-Komponente zu verwenden, importieren und nutzen Sie den useIntlayer-Hook aus dem react-intlayer-Paket. Dieser Hook ruft den Inhalt für den angegebenen Schlüssel ab und ermöglicht es Ihnen, eine Bedingung zu übergeben, um die entsprechende Ausgabe auszuwählen.

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

const ConditionalComponent: FC = () => {
  const { myCondition } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* Ausgabe: mein Inhalt, wenn es wahr ist */
          myCondition(true)
        }
      </p>
      <p>
        {
          /* Ausgabe: mein Inhalt, wenn es falsch ist */
          myCondition(false)
        }
      </p>
      <p>
        {
          /* Ausgabe: mein Inhalt, wenn die Bedingung fehlschlägt */
          myCondition("")
        }
      </p>
      <p>
        {
          /* Ausgabe: mein Inhalt, wenn die Bedingung fehlschlägt */
          myCondition(undefined)
        }
      </p>
    </div>
  );
};

export default ConditionalComponent;

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.