Der Inhalt dieser Seite wurde mit einer KI übersetzt.

Erste Schritte mit der Deklaration Ihrer Inhalte

Dateierweiterungen

Standardmäßig überwacht Intlayer alle Dateien mit den folgenden Erweiterungen für Inhaltsdeklarationen:

.content.json
.content.ts
.content.tsx
.content.js
.content.jsx
.content.mjs
.content.mjx
.content.cjs
.content.cjx

Die Anwendung sucht standardmäßig nach Dateien, die dem Glob-Muster ./src/**/*.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx} entsprechen.

Diese Standarderweiterungen sind für die meisten Anwendungen geeignet. Wenn Sie jedoch spezifische Anforderungen haben, lesen Sie den Leitfaden zur Anpassung von Inhaltserweiterungen, um Anweisungen zur Verwaltung zu erhalten.

Für eine vollständige Liste der Konfigurationsoptionen besuchen Sie die Konfigurationsdokumentation.

Deklarieren Sie Ihre Inhalte

Erstellen und verwalten Sie Ihre Wörterbücher:

src/example.content.tsx

import { t, enu, cond, nest, md, type Dictionary } from "intlayer";

interface Content {
  imbricatedContent: {
    imbricatedContent2: {
      stringContent: string;
      numberContent: number;
      booleanContent: boolean;
      javaScriptContent: string;
    };
  };
  multilingualContent: string;
  quantityContent: string;
  conditionalContent: string;
  externalContent: string;
  insertionContent: string;
  fileContent: string;
  nestedContent: any;
  markdownContent: any;
  jsxContent: any;
}

export default {
  key: "page",
  content: {
    imbricatedContent: {
      imbricatedContent2: {
        stringContent: "Hallo Welt",
        numberContent: 123,
        booleanContent: true,
        javaScriptContent: `${process.env.NODE_ENV}`,
      },
    },
    multilingualContent: t({
      en: "Englischer Inhalt",
      "en-GB": "Englischer Inhalt (UK)",
      fr: "Französischer Inhalt",
      es: "Spanischer Inhalt",
    }),
    quantityContent: enu({
      "<-1": "Weniger als minus ein Auto",
      "-1": "Minus ein Auto",
      "0": "Keine Autos",
      "1": "Ein Auto",
      ">5": "Einige Autos",
      ">19": "Viele Autos",
    }),
    conditionalContent: cond({
      true: "Validierung ist aktiviert",
      false: "Validierung ist deaktiviert",
    }),
    nestedContent: nest(
      "navbar", // Der Schlüssel des zu verschachtelnden Wörterbuchs
      "login.button" // [Optional] Der Pfad zum zu verschachtelnden Inhalt
    ),
    externalContent: fetch("https://example.com").then((res) => res.json())
    markdownContent: md("# Markdown-Beispiel"),

    /*
     * Nur verfügbar mit `react-intlayer` oder `next-intlayer`
     */
    jsxContent: <h1>Mein Titel</h1>,
  },
} satisfies Dictionary<Content>; // [optional] Dictionary ist generisch und ermöglicht es Ihnen, die Formatierung Ihres Wörterbuchs zu stärken

Funktionsverschachtelung

Sie können problemlos Funktionen in andere Funktionen verschachteln.

Beispiel:

src/example.content.tsx

import { t, enu, cond, nest, md, type Dictionary } from "intlayer";

const getName = async () => "John Doe";

export default {
  key: "page",
  content: {
    // `getIntlayer('page','de').hiMessage` gibt `['Hallo', ' ', 'John Doe']` zurück
    hiMessage: [
      t({
        en: "Hallo",
        fr: "Salut",
        es: "Hola",
      }),
      " ",
      getName(),
    ],
    // Zusammengesetzter Inhalt, der Bedingung, Enumeration und mehrsprachigen Inhalt verschachtelt
    // `getIntlayer('page','de').advancedContent(true)(10)` gibt 'Mehrere Elemente gefunden' zurück
    advancedContent: cond({
      true: enu({
        "0": t({
          en: "Keine Elemente gefunden",
          fr: "Aucun article trouvé",
          es: "No se encontraron artículos",
        }),
        "1": t({
          en: "Ein Element gefunden",
          fr: "Un article trouvé",
          es: "Se encontró un artículo",
        }),
        ">1": t({
          en: "Mehrere Elemente gefunden",
          fr: "Plusieurs articles trouvés",
          es: "Se encontraron múltiples artículos",
        }),
      }),
      false: t({
        en: "Keine gültigen Daten verfügbar",
        fr: "Aucune donnée valide disponible",
        es: "No hay datos válidos disponibles",
      }),
    }),
  },
} satisfies Dictionary;

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

Intlayer CMS Übersetzung