Creation:2025-08-23Last update:2025-08-23

    Dịch thuật

    Định nghĩa Dịch thuật

    Hàm t trong intlayer cho phép bạn khai báo nội dung bằng nhiều ngôn ngữ. Hàm này đảm bảo an toàn kiểu, báo lỗi nếu thiếu bất kỳ bản dịch nào, điều này đặc biệt hữu ích trong môi trường TypeScript.

    Dưới đây là ví dụ về cách khai báo nội dung với các bản dịch.

    **/*.content.ts
    import { t, type Dictionary } from "intlayer";

interface Content {
  welcomeMessage: string; // thông điệp chào mừng
}

export default {
  key: "multi_lang",
  content: {
    welcomeMessage: t({
      en: "Welcome to our application",
      fr: "Bienvenue dans notre application",
      es: "Bienvenido a nuestra aplicación",
    }),
  },
} satisfies Dictionary<Content>;

    Cấu hình cho các Ngôn ngữ (Locales)

    Để đảm bảo xử lý dịch thuật đúng cách, bạn có thể cấu hình các ngôn ngữ được chấp nhận trong intlayer.config.ts. Cấu hình này cho phép bạn định nghĩa các ngôn ngữ mà ứng dụng của bạn hỗ trợ:

    intlayer.config.ts
    import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  },
};

export default config;

    Sử dụng Dịch thuật trong Các Thành phần React

    Với react-intlayer, bạn có thể sử dụng các bản dịch trong các thành phần React. Dưới đây là một ví dụ:

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const MyComponent: FC = () => {
  const content = useIntlayer("multi_lang");

  return (
    <div>
      <p>{content.welcomeMessage}</p>
    </div>
  );
};

export default MyComponent;

    Thành phần này lấy bản dịch tương ứng dựa trên locale hiện tại được thiết lập trong ứng dụng của bạn.

    Đối tượng Nội dung Tùy chỉnh

    intlayer hỗ trợ các đối tượng nội dung tùy chỉnh cho việc dịch, cho phép bạn định nghĩa các cấu trúc phức tạp hơn trong khi vẫn đảm bảo an toàn kiểu. Dưới đây là một ví dụ với một đối tượng tùy chỉnh:

    **/*.content.ts
    import { t, type Dictionary } from "intlayer";

interface ICustomContent {
  title: string;
  content: string;
}

const customContent = {
  key: "custom_content",
  content: {
    profileText: t<ICustomContent>({
      en: {
        title: "Page Title",
        content: "Page Content",
      },
      fr: {
        title: "Titre de la Page",
        content: "Contenu de la Page",
      },
      es: {
        title: "Título de la Página",
        content: "Contenido de la Página",
      },
    }),
  },
} satisfies Dictionary;

export default customContent;
    Khai báo nội dung
    Số nhiều