Deklarasi Konten Per-Locale di Intlayer

Intlayer mendukung dua cara untuk mendeklarasikan konten multibahasa:

• Satu file dengan semua terjemahan
• Satu file per locale (format per-locale)

Fleksibilitas ini memungkinkan:

• Migrasi mudah dari alat i18n lainnya
• Dukungan untuk alur kerja terjemahan otomatis
• Organisasi terjemahan yang jelas ke dalam file terpisah berdasarkan locale

Satu File dengan Banyak Terjemahan

Format ini ideal untuk:

• Iterasi cepat dalam kode.
• Integrasi mulus dengan CMS.

Ini adalah pendekatan yang direkomendasikan untuk sebagian besar kasus penggunaan. Format ini memusatkan terjemahan, sehingga memudahkan iterasi dan integrasi dengan 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;

Direkomendasikan: Format ini paling baik digunakan saat memakai editor visual Intlayer atau mengelola terjemahan langsung di dalam kode.

Konfigurasi Global untuk File Per-Locale

Anda dapat mengonfigurasi konfigurasi global untuk file per-locale dengan menambahkan hal berikut ke file intlayer.config.ts Anda:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  dictionary: {    locale: Locales.ENGLISH,  },};export default config;

Dengan menggunakan konfigurasi ini, semua file per-locale akan dibuat dengan locale default yang diatur ke bahasa Inggris. Ini juga mencakup pembuatan file .content menggunakan perintah extract, dan compiler. (Lihat Compiler atau Extract untuk informasi lebih lanjut.)

Format Per-Locale

Format ini berguna ketika:

• Anda ingin melakukan versioning atau menimpa terjemahan secara independen.
• Anda mengintegrasikan alur kerja terjemahan mesin atau manusia.

Anda juga dapat memisahkan terjemahan ke dalam file locale individual dengan menentukan field locale:

import { t, Locales, type Dictionary } from "intlayer";

const helloWorldContent = {
  key: "hello-world",
  locale: Locales.SPANISH, // Penting
  content: { multilingualContent: "Título de mi componente" },
} satisfies Dictionary;

export default helloWorldContent;

Penting: Pastikan field locale didefinisikan. Ini memberitahu Intlayer bahasa apa yang diwakili oleh file tersebut.

Catatan: Dalam kedua kasus, file deklarasi konten harus mengikuti pola penamaan *.content.{ts,tsx,js,jsx,mjs,cjs,json} agar dikenali oleh Intlayer. Sufiks .[locale] bersifat opsional dan hanya digunakan sebagai konvensi penamaan.

Menggabungkan Format

Anda dapat menggabungkan kedua pendekatan deklarasi untuk kunci konten yang sama. Sebagai contoh:

• Deklarasikan konten dasar Anda secara statis dalam file seperti index.content.ts.
• Tambahkan atau timpa terjemahan spesifik dalam file terpisah seperti index.fr.content.ts atau index.content.json.

Pengaturan ini sangat berguna ketika:

• Anda ingin mendefinisikan struktur konten awal dalam kode.
• Anda berencana untuk memperkaya atau melengkapi terjemahan nanti menggunakan CMS atau alat otomatis.

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

Contoh

Berikut adalah file deklarasi konten multibahasa:

import { t, type Dictionary } from "intlayer";const helloWorldContent = {  key: "hello-world",  locale: Locales.ENGLISH,  content: {    multilingualContent: "Judul komponen saya",    projectName: "Proyek saya",  },} satisfies Dictionary;export 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 menggabungkan file multibahasa dan per-locale secara otomatis.

import { getIntlayer, Locales } from "intlayer";const intlayer = getIntlayer("hello-world"); // Default locale adalah ENGLISH, jadi ini akan mengembalikan konten dalam bahasa ENGLISHconsole.log(JSON.stringify(intlayer, null, 2));// Hasil:// {//  "multilingualContent": "Judul komponen saya",//  "projectName": "Proyek saya"// }const intlayer = getIntlayer("hello-world", Locales.SPANISH);console.log(JSON.stringify(intlayer, null, 2));// Hasil:// {//  "multilingualContent": "Título de mi componente",//  "projectName": "Proyek saya"// }const intlayer = getIntlayer("hello-world", Locales.FRENCH);console.log(JSON.stringify(intlayer, null, 2));// Hasil:// {//  "multilingualContent": "Titre de mon composant",//  "projectName": "Proyek saya"// }

Pembuatan Terjemahan Otomatis

Gunakan intlayer CLI untuk mengisi otomatis terjemahan yang hilang berdasarkan layanan yang Anda pilih.