Khai báo nội dung Theo Ngôn Ngữ trong Intlayer

Intlayer hỗ trợ hai cách để khai báo nội dung đa ngôn ngữ:

• Một file duy nhất chứa tất cả các bản dịch
• Một file cho mỗi ngôn ngữ (định dạng theo ngôn ngữ)

Sự linh hoạt này cho phép:

• Dễ dàng di chuyển từ các công cụ i18n khác
• Hỗ trợ cho các quy trình dịch tự động
• Tổ chức rõ ràng các bản dịch thành các file riêng biệt theo từng ngôn ngữ

Một File với Nhiều Bản Dịch

Định dạng này phù hợp cho:

• Lặp nhanh trong code.
• Tích hợp liền mạch với CMS.

Đây là phương pháp được khuyến nghị cho hầu hết các trường hợp sử dụng. Nó tập trung các bản dịch, giúp dễ dàng lặp lại và tích hợp với CMS.

import { t, type Dictionary } from "intlayer";const helloWorldContent = {  key: "hello-world",  content: {    multilingualContent: t({      en: "Title of my component",      es: "Título de mi componente",    }),  },} satisfies Dictionary;export default helloWorldContent;

Khuyến nghị: Định dạng này là tốt nhất khi sử dụng trình chỉnh sửa trực quan của Intlayer hoặc quản lý bản dịch trực tiếp trong mã.

Định dạng theo từng locale

Định dạng này hữu ích khi:

• Bạn muốn phiên bản hóa hoặc ghi đè các bản dịch một cách độc lập.
• Bạn đang tích hợp các quy trình dịch máy hoặc dịch thủ công.

Bạn cũng có thể tách các bản dịch thành các tệp riêng biệt theo từng locale bằng cách chỉ định trường locale:

import { t, Locales, type Dictionary } from "intlayer";const helloWorldContent = {  key: "hello-world",  locale: Locales.ENGLISH, // Quan trọng  content: { multilingualContent: "Title of my component" },} satisfies Dictionary;export default helloWorldContent;

import { t, Locales, type Dictionary } from "intlayer";const helloWorldContent = {  key: "hello-world",  locale: Locales.SPANISH, // Quan trọng  content: { multilingualContent: "Título de mi componente" },} satisfies Dictionary;export default helloWorldContent;

Quan trọng: Hãy chắc chắn rằng trường locale được định nghĩa. Nó cho Intlayer biết ngôn ngữ mà file đại diện.

Lưu ý: Trong cả hai trường hợp, file khai báo nội dung phải tuân theo mẫu đặt tên *.content.{ts,tsx,js,jsx,mjs,cjs,json} để được Intlayer nhận diện. Phần hậu tố .[locale] là tùy chọn và chỉ được sử dụng như một quy ước đặt tên.

Kết hợp các định dạng

Bạn có thể kết hợp cả hai cách khai báo cho cùng một khóa nội dung. Ví dụ:

• Khai báo nội dung cơ sở của bạn một cách tĩnh trong một file như index.content.ts.
• Thêm hoặc ghi đè các bản dịch cụ thể trong các file riêng biệt như index.fr.content.ts hoặc index.content.json.

Cấu hình này đặc biệt hữu ích khi:

• Bạn muốn định nghĩa cấu trúc nội dung ban đầu trong code.
• Bạn dự định bổ sung hoặc hoàn thiện các bản dịch sau này bằng cách sử dụng CMS hoặc các công cụ tự động.

.└── Components    └── MyComponent        ├── index.content.ts        ├── index.content.json        └── index.ts

Ví dụ

Dưới đây là một file khai báo nội dung đa ngôn ngữ:

import { t, type Dictionary } from "intlayer";const helloWorldContent = {  key: "hello-world",  locale: Locales.ENGLISH,  content: {    multilingualContent: "Tiêu đề của thành phần của tôi",    projectName: "Dự án của tôi",  },} satisfies Dictionary;// Xuất nội dung helloWorldContent mặc địnhexport default helloWorldContent;

{  "$schema": "https://intlayer.org/schema.json",  "key": "hello-world",  "content": {    "multilingualContent": {      "nodeType": "translation",      "translation": {        "fr": "Titre de mon composant",        "es": "Título de mi componente"      }    }  }}

Intlayer tự động hợp nhất các file đa ngôn ngữ và theo từng locale.

import { getIntlayer, Locales } from "intlayer";const intlayer = getIntlayer("hello-world"); // Ngôn ngữ mặc định là ENGLISH, nên nó sẽ trả về nội dung bằng tiếng ANHconsole.log(JSON.stringify(intlayer, null, 2));// Kết quả:// {//  "multilingualContent": "Tiêu đề của thành phần của tôi",//  "projectName": "Dự án của tôi"// }const intlayer = getIntlayer("hello-world", Locales.SPANISH);console.log(JSON.stringify(intlayer, null, 2));// Kết quả:// {//  "multilingualContent": "Título de mi componente",//  "projectName": "Dự án của tôi"// }const intlayer = getIntlayer("hello-world", Locales.FRENCH);console.log(JSON.stringify(intlayer, null, 2));// Kết quả:// {//  "multilingualContent": "Titre de mon composant",//  "projectName": "Dự án của tôi"// }

Tạo Dịch Tự Động

Sử dụng intlayer CLI để tự động điền các bản dịch còn thiếu dựa trên các dịch vụ bạn ưu tiên.