Autor:

Erstellung:2026-06-12Letzte Aktualisierung:2026-06-12

Referenzieren Sie diese Dokumentation mit Ihrem bevorzugten AI-Assistenten

Google AI mode Gemini

Perplexity Mistral

Stellen Sie Ihre Frage und erhalten Sie einen Resümee des Dokuments, indem Sie diese Seite und den AI-Anbieter Ihrer Wahl referenzieren

Versionshistorie

"Veröffentlichung der Varianten-Funktion"
v9.0.012.6.2026

Der Inhalt dieser Seite wurde mit einer KI übersetzt.

Den englischen Originaltext ansehen

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

Varianten

Eine Variante (Variant) ist ein Satz von Inhaltsdateien, die denselben Wörterbuchschlüssel (key) teilen, aber jeweils einen anderen variant-Namen tragen. Intlayer liefert die entsprechende Datei basierend auf dem an useIntlayer übergebenen Selektor aus.

Deklarieren von Varianten

Jede Datei repräsentiert eine benannte Alternative. Wenn variant weggelassen wird (oder auf "default" gesetzt wird), gilt dies als Standardvariante (Fallback).

hero-banner.content.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

const dictionary = {
  key: "hero-banner",
  variant: "default",
  content: {
    headline: t({
      en: "Build faster with Intlayer",
      fr: "Développez plus vite avec Intlayer",
    }),
    cta: t({ en: "Get started", fr: "Commencer" }),
  },
} satisfies Dictionary;

export default dictionary;

hero-banner.black-friday.content.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

const dictionary = {
  key: "hero-banner",
  variant: "black_friday",
  content: {
    headline: t({
      en: "50 % off — today only",
      fr: "−50 % — aujourd'hui seulement",
    }),
    cta: t({ en: "Shop now", fr: "Acheter maintenant" }),
  },
} satisfies Dictionary;

export default dictionary;

Nutzen von Varianten

Standardvariante

Hero.tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { useIntlayer } from "react-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → Standardvariante

  return (
    <section>
      <h1>{headline}</h1>
      <a>{cta}</a>
    </section>
  );
};

Hero.tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { useIntlayer } from "next-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → Standardvariante

  return (
    <section>
      <h1>{headline}</h1>
      <a>{cta}</a>
    </section>
  );
};

Hero.vue

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<script setup>
import { useIntlayer } from "vue-intlayer";
const { headline, cta } = useIntlayer("hero-banner");
</script>

<template>
  <section>
    <h1>{{ headline }}</h1>
    <a>{{ cta }}</a>
  </section>
</template>

Hero.svelte

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<script lang="ts">
import { useIntlayer } from "svelte-intlayer";
const content = useIntlayer("hero-banner");
</script>

<section>
  <h1>{$content.headline}</h1>
  <a>{$content.cta}</a>
</section>

Hero.tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { useIntlayer } from "preact-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → Standardvariante

  return (
    <section>
      <h1>{headline}</h1>
      <a>{cta}</a>
    </section>
  );
};

Hero.tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { useIntlayer } from "solid-intlayer";

export const Hero = () => {
  const content = useIntlayer("hero-banner");
  // → Standardvariante

  return (
    <section>
      <h1>{content().headline}</h1>
      <a>{content().cta}</a>
    </section>
  );
};

hero.component.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-hero",
  template: `
    <section>
      <h1>{{ content().headline }}</h1>
      <a>{{ content().cta }}</a>
    </section>
  `,
})
export class HeroComponent {
  content = useIntlayer("hero-banner");
}

hero.js

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { useIntlayer } from "vanilla-intlayer";const { headline, cta } = useIntlayer("hero-banner");document.body.innerHTML = `  <section>    <h1>${headline}</h1>    <a>${cta}</a>  </section>`;

Benannte Variante

tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

const { headline, cta } = useIntlayer("hero-banner", {  variant: "black_friday",});

Benannte Variante mit explizitem Locale

tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

const content = useIntlayer("hero-banner", {  variant: "black_friday",  locale: "de",});

Typische Anwendungsfälle

A/B-Kopiertests, die durch einen Experiment-Schlüssel gesteuert werden
Saisonale oder Werbe-Banner
Über Feature-Flags gesteuerte Nachrichten
Lokalspezifische Marketingkampagnen

Dynamische Datensätze