Autor:

Data utworzenia:2026-06-12Ostatnia aktualizacja:2026-06-12

Prześlij ten dokument do swojego ulubionego asystenta AIChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Zadaj pytanie i otrzymaj streszczenie dokumentu, odwołując się do tej strony i wybranego dostawcy AI

Historia wersji

"Wydanie funkcji wariantów słowników"
v9.0.012.06.2026

Treść tej strony została przetłumaczona przy użyciu sztucznej inteligencji.

Zobacz ostatnią wersję oryginalnej treści w języku angielskim

Edytuj tę dokumentację

Jeśli masz pomysł na ulepszenie tej dokumentacji, zachęcamy do przesłania pull requesta na GitHubie.

Link do dokumentacji na GitHubie

Kopiuj

Kopiuj dokument Markdown do schowka

Warianty

Name: Intlayer
Author: Intlayer

Wariant (Variant) to zestaw plików zawartości, które współdzielą ten sam klucz słownika (key), ale każdy ma inną nazwę wariantu (variant). Intlayer serwuje odpowiedni plik na podstawie selektora przekazanego do useIntlayer.

Deklarowanie wariantów

Każdy plik reprezentuje jedną nazwaną alternatywę. Pominięcie klucza variant (lub ustawienie go na "default") oznacza dany plik jako wariant domyślny (fallback).

hero-banner.content.ts

Kopiuj kod

Skopiuj kod do schowka

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

Kopiuj kod

Skopiuj kod do schowka

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;

Używanie wariantów

Wariant domyślny

Hero.tsx

Kopiuj kod

Skopiuj kod do schowka

import { useIntlayer } from "react-intlayer";

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

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

Hero.tsx

Kopiuj kod

Skopiuj kod do schowka

import { useIntlayer } from "next-intlayer";

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

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

Hero.vue

Kopiuj kod

Skopiuj kod do schowka

<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

Kopiuj kod

Skopiuj kod do schowka

<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

Kopiuj kod

Skopiuj kod do schowka

import { useIntlayer } from "preact-intlayer";

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

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

Hero.tsx

Kopiuj kod

Skopiuj kod do schowka

import { useIntlayer } from "solid-intlayer";

export const Hero = () => {
  const content = useIntlayer("hero-banner");
  // → wariant domyślny

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

hero.component.ts

Kopiuj kod

Skopiuj kod do schowka

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

Kopiuj kod

Skopiuj kod do schowka

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

Nazwany wariant

tsx

Kopiuj kod

Skopiuj kod do schowka

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

Nazwany wariant z jawnym wskazaniem lokalizacji

tsx

Kopiuj kod

Skopiuj kod do schowka

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

Typowe przypadki użycia

Testy A/B kopii sterowane przez klucz eksperymentu
Banery sezonowe lub promocyjne
Komunikaty powiązane z flagami funkcji (feature flags)
Lokalne kampanie marketingowe specyficzne dla danego obszaru

Kolekcje Dynamiczne rekordy