\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 // → variante par défaut\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 // → variante par défaut\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### Variante nommée\n\n```tsx\nconst { headline, cta } = useIntlayer(\"hero-banner\", {\n variant: \"black_friday\",\n});\n```\n\n### Variante nommée avec locale explicite\n\n```tsx\nconst content = useIntlayer(\"hero-banner\", {\n variant: \"black_friday\",\n locale: \"fr\",\n});\n```\n\n## Cas d'utilisation typiques\n\n- Tests A/B pilotés par une clé d'expérimentation\n- Bannières promotionnelles ou saisonnières\n- Messages soumis à des feature flags\n- Campagnes marketing spécifiques à une zone géographique\n","description":"Utilisez le champ de métadonnées de variante dans les fichiers de contenu Intlayer pour déclarer des alternatives de contenu nommées (tests A/B, bannières saisonnières, texte avec feature flags) et basculez entre elles au moment de l'exécution sans modification de code.","url":"https://intlayer.org/fr/doc/concept/variants","datePublished":"2026-06-12","dateModified":"2026-06-12","version":"9.0.0","keywords":"Variantes, Tests A/B, Feature Flags, Contenu Dynamique, Intlayer, Internationalisation","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Développeurs, Responsables de contenu"}}

Auteur:

Création:2026-06-12Dernière mise à jour:2026-06-12

Référencez cette doc à votre assistant AI préféréChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Posez votre question et obtenez un résumé du document en referencant cette page et le Provider AI de votre choix

Historique des versions

"Lancement de la fonctionnalité des variantes de dictionnaires"
v9.0.012/06/2026

Le contenu de cette page a été traduit à l'aide d'une IA.

Voir la dernière version du contenu original en anglais

Modifier cette documentation

Si vous avez une idée d’amélioration pour améliorer cette documentation, n’hésitez pas à contribuer en submitant une pull request sur GitHub.

Lien GitHub de la documentation

Copier

Copier le Markdown du doc dans le presse-papiers

Variantes

Une variante est un ensemble de fichiers de contenu qui partagent la même clé de dictionnaire (key) mais portent chacun un nom de variante (variant) différent. Intlayer sert le fichier approprié en fonction du sélecteur passé à useIntlayer.

Déclarer des variantes

Chaque fichier représente une alternative nommée. Omettre variant (ou le définir sur "default") le marque comme valeur par défaut (fallback).

hero-banner.content.ts

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

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;

Consommer des variantes

Variante par défaut

Hero.tsx

Copier le code

Copier le code dans le presse-papiers

import { useIntlayer } from "react-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → variante par défaut

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

Hero.tsx

Copier le code

Copier le code dans le presse-papiers

import { useIntlayer } from "next-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → variante par défaut

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

Hero.vue

Copier le code

Copier le code dans le presse-papiers

<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

Copier le code

Copier le code dans le presse-papiers

<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

Copier le code

Copier le code dans le presse-papiers

import { useIntlayer } from "preact-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → variante par défaut

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

Hero.tsx

Copier le code

Copier le code dans le presse-papiers

import { useIntlayer } from "solid-intlayer";

export const Hero = () => {
  const content = useIntlayer("hero-banner");
  // → variante par défaut

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

hero.component.ts

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

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

Variante nommée

tsx

Copier le code

Copier le code dans le presse-papiers

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

Variante nommée avec locale explicite

tsx

Copier le code

Copier le code dans le presse-papiers

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

Cas d'utilisation typiques

Tests A/B pilotés par une clé d'expérimentation
Bannières promotionnelles ou saisonnières
Messages soumis à des feature flags
Campagnes marketing spécifiques à une zone géographique

Collections Enregistrements dynamiques