\n\n \n ```\n\n \n \n ```svelte fileName=\"Hero.svelte\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n \n\n

\n

{$content.headline}

\n {$content.cta}\n

\n ```\n\n \n \n ```tsx fileName=\"Hero.tsx\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n import { useIntlayer } from \"preact-intlayer\";\n\n export const Hero = () => {\n const { headline, cta } = useIntlayer(\"hero-banner\");\n // → Standardvariante\n\n return (\n

\n

{headline}

\n {cta}\n

\n );\n };\n ```\n\n \n \n ```tsx fileName=\"Hero.tsx\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n import { useIntlayer } from \"solid-intlayer\";\n\n export const Hero = () => {\n const content = useIntlayer(\"hero-banner\");\n // → Standardvariante\n\n return (\n

\n

{content().headline}

\n {content().cta}\n

\n );\n };\n ```\n\n \n \n ```typescript fileName=\"hero.component.ts\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n import { Component } from \"@angular/core\";\n import { useIntlayer } from \"angular-intlayer\";\n\n @Component({\n selector: \"app-hero\",\n template: `\n

\n

{{ content().headline }}

\n {{ content().cta }}\n

\n `,\n })\n export class HeroComponent {\n content = useIntlayer(\"hero-banner\");\n }\n ```\n\n \n \n ```javascript fileName=\"hero.js\"\n import { useIntlayer } from \"vanilla-intlayer\";\n\n const { headline, cta } = useIntlayer(\"hero-banner\");\n\n document.body.innerHTML = `\n

\n

${headline}

\n ${cta}\n

\n `;\n ```\n\n \n\n\n### Benannte Variante\n\n```tsx\nconst { headline, cta } = useIntlayer(\"hero-banner\", {\n variant: \"black_friday\",\n});\n```\n\n### Benannte Variante mit explizitem Locale\n\n```tsx\nconst content = useIntlayer(\"hero-banner\", {\n variant: \"black_friday\",\n locale: \"de\",\n});\n```\n\n## Typische Anwendungsfälle\n\n- A/B-Kopiertests, die durch einen Experiment-Schlüssel gesteuert werden\n- Saisonale oder Werbe-Banner\n- Über Feature-Flags gesteuerte Nachrichten\n- Lokalspezifische Marketingkampagnen\n","description":"Verwenden Sie das Metadatenfeld variant in Inhaltsdateien von Intlayer, um benannte Inhaltsalternativen zu deklarieren (A/B-Tests, saisonale Banner, durch Feature-Flags gesteuerte Texte) und wechseln Sie zur Laufzeit ohne Codeänderungen zwischen ihnen.","url":"https://intlayer.org/de/doc/concept/variants","datePublished":"2026-06-12","dateModified":"2026-06-12","version":"9.0.0","keywords":"Varianten, A/B-Tests, Feature-Flags, Dynamischer Inhalt, Intlayer, Internationalisierung","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Entwickler, Inhaltsmanager"}}

Autor:

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

Referenzieren Sie diese Dokumentation mit Ihrem bevorzugten AI-AssistentenChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

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

Diese Dokumentation bearbeiten

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

Kopieren

Markdown des Dokuments in die Zwischenablage kopieren

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

Sammlungen Dynamische Datensätze