Một biến thể (variant) là một tập hợp các tệp nội dung chia sẻ cùng một khóa từ điển (key) nhưng mỗi tệp mang một tên variant khác nhau. Intlayer phục vụ tệp phù hợp dựa trên bộ chọn được truyền vào useIntlayer.

Khai báo các biến thể

Mỗi tệp đại diện cho một lựa chọn thay thế có tên. Việc bỏ qua variant (hoặc đặt thành "default") sẽ đánh dấu tệp đó làm phương án mặc định (fallback).

hero-banner.content.ts

Sao chép mã

Sao chép mã vào 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

Sao chép mã

Sao chép mã vào 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;

Sử dụng biến thể

Biến thể mặc định

Hero.tsx

Sao chép mã

Sao chép mã vào clipboard

import { useIntlayer } from "react-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → biến thể mặc định

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

Hero.tsx

Sao chép mã

Sao chép mã vào clipboard

import { useIntlayer } from "next-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → biến thể mặc định

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

Hero.vue

Sao chép mã

Sao chép mã vào 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

Sao chép mã

Sao chép mã vào 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

Sao chép mã

Sao chép mã vào clipboard

import { useIntlayer } from "preact-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → biến thể mặc định

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

Hero.tsx

Sao chép mã

Sao chép mã vào clipboard

import { useIntlayer } from "solid-intlayer";

export const Hero = () => {
  const content = useIntlayer("hero-banner");
  // → biến thể mặc định

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

hero.component.ts

Sao chép mã

Sao chép mã vào 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

Sao chép mã

Sao chép mã vào clipboard

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

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

Biến thể có tên

tsx

Sao chép mã

Sao chép mã vào clipboard

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

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

Biến thể có tên với ngôn ngữ cụ thể

tsx

Sao chép mã

Sao chép mã vào clipboard

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

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

Các trường hợp sử dụng điển hình

Các thử nghiệm A/B nội dung được điều hướng bởi một khóa thử nghiệm
Biểu ngữ theo mùa hoặc biểu ngữ quảng cáo
Thông điệp được gắn cờ tính năng (feature flag)
Các chiến dịch tiếp thị cụ thể theo từng vùng địa lý

Bộ sưu tập

Bản ghi động