Yazar:

Oluşturma:2026-06-12Son güncelleme:2026-06-12

Bu dokümanı favori AI asistanınıza referans verinChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Sorunuzu sorun ve bu sayfaya ve seçtiğiniz AI sağlayıcısına referans vererek belgenin bir özetini alın

Sürüm Geçmişi

"Varyantlar özelliğinin sürümü"
v9.0.012.06.2026

Bu sayfanın içeriği bir yapay zeka kullanılarak çevrildi.

Orijinal içeriğin İngilizce son sürümünü görüntüleyin

Bu dokümanı düzenle

Bu dokümantasyonu geliştirmek için bir fikriniz varsa, lütfen GitHub'da bir çekme isteği göndererek katkıda bulunmaktan çekinmeyin.

Dokümantasyon için GitHub bağlantısı

Kopyala

Belge Markdown'ını panoya kopyala

Varyantlar

Name: Intlayer
Author: Intlayer

Bir varyant (variant), aynı sözlük anahtarını (key) paylaşan ancak her biri farklı bir variant adı taşıyan içerik dosyaları kümesidir. Intlayer, useIntlayer fonksiyonuna geçirilen seçiciye göre uygun dosyayı sunar.

Varyantları bildirme

Her dosya adlandırılmış bir alternatifi temsil eder. variant alanının atlanması (veya "default" olarak ayarlanması) onu varsayılan (fallback) varyant olarak işaretler.

hero-banner.content.ts

Kodu kopyala

Kodu panoya kopyala

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

Kodu kopyala

Kodu panoya kopyala

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;

Varyantları tüketme

Varsayılan varyant

Hero.tsx

Kodu kopyala

Kodu panoya kopyala

import { useIntlayer } from "react-intlayer";

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

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

Hero.tsx

Kodu kopyala

Kodu panoya kopyala

import { useIntlayer } from "next-intlayer";

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

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

Hero.vue

Kodu kopyala

Kodu panoya kopyala

<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

Kodu kopyala

Kodu panoya kopyala

<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

Kodu kopyala

Kodu panoya kopyala

import { useIntlayer } from "preact-intlayer";

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

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

Hero.tsx

Kodu kopyala

Kodu panoya kopyala

import { useIntlayer } from "solid-intlayer";

export const Hero = () => {
  const content = useIntlayer("hero-banner");
  // → varsayılan varyant

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

hero.component.ts

Kodu kopyala

Kodu panoya kopyala

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

Kodu kopyala

Kodu panoya kopyala

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

Adlandırılmış varyant

tsx

Kodu kopyala

Kodu panoya kopyala

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

Belirli dil seçeneği ile adlandırılmış varyant

tsx

Kodu kopyala

Kodu panoya kopyala

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

Tipik kullanım senaryoları

Bir deney anahtarı (experiment key) tarafından yönlendirilen A/B metin testleri
Dönemsel veya tanıtım afişleri
Özellik bayraklı (feature flag) mesajlaşma
Bölgeye özel pazarlama kampanyaları

Koleksiyonlar Dinamik Kayıtlar