يدعم Intlayer طريقتين لإعلان المحتوى متعدد اللغات:

ملف واحد يحتوي على جميع الترجمات
ملف واحد لكل لغة (صيغة per-locale)

تتيح هذه المرونة:

سهولة الانتقال من أدوات i18n الأخرى
دعم سير العمل التلقائي للترجمة
تنظيم واضح للترجمات في ملفات منفصلة خاصة بكل لغة

ملف واحد يحتوي على ترجمات متعددة

هذه الصيغة مثالية لـ:

التكرار السريع في الكود.
التكامل السلس مع نظام إدارة المحتوى (CMS).

هذا هو النهج الموصى به لمعظم حالات الاستخدام. فهو يركز الترجمات، مما يجعل من السهل التكرار والتكامل مع نظام إدارة المحتوى.

hello-world.content.ts

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

موصى به: هذه الصيغة هي الأفضل عند استخدام محرر Intlayer المرئي أو إدارة الترجمات مباشرة في الكود.

صيغة Per-Locale

تكون هذه الصيغة مفيدة عندما:

تريد إصدار أو تجاوز الترجمات بشكل مستقل.
تقوم بدمج سير العمل التلقائي أو البشري للترجمة.

يمكنك أيضًا تقسيم الترجمات إلى ملفات لغة فردية عن طريق تحديد حقل اللغة:

hello-world.en.content.ts

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

hello-world.es.content.ts

import { t, Locales, type Dictionary } from "intlayer";const helloWorldContent = {  key: "hello-world",  locale: Locales.SPANISH, // مهم  content: { multilingualContent: "Título de mi componente" },};

مهم: تأكد من تعريف حقل اللغة. يوضح هذا الحقل لـ Intlayer اللغة التي يمثلها الملف.

ملاحظة: في كلتا الحالتين، يجب أن يتبع ملف إعلان المحتوى نمط التسمية *.content.{ts,tsx,js,jsx,mjs,cjs,json} ليتم التعرف عليه بواسطة Intlayer. اللاحقة .[locale] اختيارية وتستخدم فقط كاتفاقية تسمية.

مزج الصيغ

يمكنك مزج كلا النهجين لنفس مفتاح المحتوى. على سبيل المثال:

إعلان المحتوى الافتراضي أو الأساسي بشكل ثابت (مثل index.content.ts)

إضافة أو تجاوز محتوى خاص بلغة معينة في index.content.json، index.fr.content.ts، إلخ.

هذا مفيد بشكل خاص عندما:

تريد إعلان المحتوى الأساسي الخاص بك بشكل ثابت في قاعدة الكود الخاصة بك وملء الترجمات تلقائيًا في نظام إدارة المحتوى.

bash

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

مثال

هنا ملف إعلان محتوى متعدد اللغات:

Components/MyComponent/index.content.ts

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

Components/MyComponent/index.content.json

{  "$schema": "/schema.json",  "key": "hello-world",  "content": {    "multilingualContent": {      "nodeType": "translation",      "translation": {        "ar": "عنوان مكوني",        "fr": "Titre de mon composant",        "es": "Título de mi componente"      }    }  }}

يقوم Intlayer بدمج الملفات متعددة اللغات وملفات per-locale تلقائيًا.

Components/MyComponent/index.ts

import { getIntlayer, Locales } from "intlayer";const intlayer = getIntlayer("hello-world"); // اللغة الافتراضية هي ENGLISH، لذلك ستعيد المحتوى باللغة الإنجليزيةconsole.log(JSON.stringify(intlayer, null, 2));// النتيجة:// {//  "multilingualContent": "Title of my component",//  "projectName": "My project"// }const intlayer = getIntlayer("hello-world", Locales.SPANISH);console.log(JSON.stringify(intlayer, null, 2));// النتيجة:// {//  "multilingualContent": "Título de mi componente",//  "projectName": "My project"// }const intlayer = getIntlayer("hello-world", Locales.FRENCH);console.log(JSON.stringify(intlayer, null, 2));// النتيجة:// {//  "multilingualContent": "Titre de mon composant",//  "projectName": "My project"// }

إنشاء الترجمة تلقائيًا

استخدم intlayer CLI لملء الترجمات المفقودة تلقائيًا بناءً على الخدمات المفضلة لديك.

إذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.

رابط GitHub للتوثيق

جلب الوظيفة الملء التلقائي