Tác giả:

Ngày tạo:2026-06-12Cập nhật lần cuối:2026-06-12

Tham chiếu tài liệu này tới trợ lý AI yêu thích của bạnChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Đặt câu hỏi và nhận tóm tắt tài liệu bằng cách tham chiếu trang này và nhà cung cấp AI bạn chọn

Lịch sử phiên bản

"Phát hành tính năng từ điển biến thể"
v9.0.012/6/2026

Nội dung của trang này đã được dịch bằng AI.

Xem phiên bản mới nhất của nội dung gốc bằng tiếng Anh

Chỉnh sửa tài liệu này

Nếu bạn có ý tưởng để cải thiện tài liệu này, vui lòng đóng góp bằng cách gửi pull request trên GitHub.

Liên kết GitHub tới tài liệu

Sao chép

Sao chép Markdown của tài liệu vào bộ nhớ tạm

Biến Thể

Name: Intlayer
Author: Intlayer

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>`;

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",});

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",});

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