Penulis:

Dibuat:2026-06-12Terakhir diperbarui:2026-06-12

Referensikan dokumen ini ke asisten AI favorit AndaChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Ajukan pertanyaan Anda dan dapatkan ringkasan dokumen dengan merujuk halaman ini dan penyedia AI pilihan Anda

Riwayat Versi

"Rilis fitur varian kamus"
v9.0.012/6/2026

Konten halaman ini diterjemahkan menggunakan AI.

Lihat versi terakhir dari konten aslinya dalam bahasa Inggris

Sunting dokumen ini

Jika Anda memiliki ide untuk meningkatkan dokumentasi ini, silakan berkontribusi dengan mengajukan pull request di GitHub.

Tautan GitHub ke dokumentasi

Salin

Salin Markdown dokumentasi ke clipboard

Varian

Name: Intlayer
Author: Intlayer

Sebuah varian (variant) adalah sekumpulan file konten yang memiliki kunci kamus (key) yang sama tetapi masing-masing membawa nama variant yang berbeda. Intlayer menyajikan file yang sesuai berdasarkan selektor yang diteruskan ke useIntlayer.

Mendeklarasikan varian

Setiap file mewakili satu alternatif bernama. Mengabaikan variant (atau menyetelnya ke "default") menandainya sebagai fallback default.

hero-banner.content.ts

Salin kode

Salin kode ke clipboard

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

Salin kode

Salin kode ke clipboard

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;

Mengonsumsi varian

Varian default

Hero.tsx

Salin kode

Salin kode ke clipboard

import { useIntlayer } from "react-intlayer";

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

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

Hero.tsx

Salin kode

Salin kode ke clipboard

import { useIntlayer } from "next-intlayer";

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

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

Hero.vue

Salin kode

Salin kode ke clipboard

<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

Salin kode

Salin kode ke clipboard

<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

Salin kode

Salin kode ke clipboard

import { useIntlayer } from "preact-intlayer";

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

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

Hero.tsx

Salin kode

Salin kode ke clipboard

import { useIntlayer } from "solid-intlayer";

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

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

hero.component.ts

Salin kode

Salin kode ke clipboard

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

Salin kode

Salin kode ke clipboard

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

Varian bernama

tsx

Salin kode

Salin kode ke clipboard

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

Varian bernama dengan lokalitas eksplisit

tsx

Salin kode

Salin kode ke clipboard

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

Kasus penggunaan umum

Pengujian salinan A/B yang didorong oleh kunci eksperimen
Spanduk musiman atau promosi
Pesan yang menggunakan bendera fitur (feature flags)
Kampanye pemasaran khusus wilayah

Koleksi Rekaman dinamis