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

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

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

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

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

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

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

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

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

Ngày tạo:2025-08-23Cập nhật lần cuối:2025-08-23

Tham chiếu tài liệu này tới trợ lý AI yêu thích của bạn

ChatGPT

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

"Khởi tạo lịch sử"
v5.5.1029/6/2025

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

Dịch thuật

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

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

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

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)

intlayer.config.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

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

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

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

**/*.content.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

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