ما هي أفضل طريقه لي تعدد اللغات في موقعي بلjs

هناك العديد من الطرق لتنفيذ تعدد اللغات في موقعك باستخدام JavaScript.

ومن بين هذه الطرق:

1- استخدام مكتبة جاهزة لترجمة المحتوى

باستخدام مكتبات ترجمة مثل Google Translate API و Yandex.Translate API و Microsoft Translator API لترجمة المحتوى بشكل ديناميكي، بإمكانك ترجمة النصوص والصفحات بأكملها.

2- استخدام ملفات الترجمة

تستطيع إنشاء ملفات ترجمة لكل لغة وتخزينها في ملفات منفصلة. وعند الحاجة إلى تغيير اللغة، يمكن استدعاء ملف الترجمة المناسب وتحميله ديناميكيًا.

ومن ثم، يمكن استخدام JavaScript لاستبدال النص الأصلي بالنص المترجم.

أما بالنسبة لأفضل مكتبة لترجمة النص في JavaScript، فهناك العديد من المكتبات المتاحة، بما في ذلك:

1. Google Translate API
2. Microsoft Translator API
3. Yandex.Translate API
4. i18next
5. Polyglot.js
6. LinguiJS

تلك المكتبات تمكنك من تحديد لغة المستخدم وتحميل ملفات الترجمة المناسبة وتحويل النصوص في الصفحة وفقًا للغة المحددة، وبالتالي، ستحصل على موقع يدعم العديد من اللغات ويتيح للمستخدمين تغيير اللغة بسهولة.

لن يمكن هذا دون استعمال حزم متخصصة مثل i18n او مثيلاتها، ولكن ان شئت تطبيق منطق العملية بشكل بسيط، قم بتعريف عنصري span في كل محتوى نصي كل منهما يوافق الترجمة الخاصة بلغة معينة، ثم سنقوم بالتحكم في اظهار هذين العنصرين بحسب اللغة المفعلة. فعلى سبيل المثال يكون:

<p>
   <span data-lang="en">hello world</span>
   <span data-lang="ar">مرحبا بالعالم</span>
</p>

ثم:

html[lang="ar"] [data-lang="en"]{
    display: none; 
}

html[lang="en"] [data-lang="ar"]{
    display: none; 
}

رغم أن هاته الطريقة غير مقترحة إلا أنها فعالة في بعض المواقع الثابتة البسيطة.

يمكن لأطر عمل ومكتبات الواجهة الامامية التعامل مع هذا المفهوم بشكل اكثر فعالية، مثل React و Vue و Angular.

يمكن ترجمة محتوى الموقع واستيراد الترجمة في ملف يمكن استخدامه من خلال i18next باتباع الخطوات التالية:

• إنشاء ملفات الترجمة:

يمكن إنشاء ملفات الترجمة بصيغة JSON، ويجب تسمية كل ملف وفقًا لرمز اللغة الذي يتم ترجمة الموقع إليه. على سبيل المثال، إذا كنت تريد ترجمة الموقع إلى اللغة الإسبانية، فيجب إنشاء ملف JSON يحمل اسم `es.json`.

محتوى ملف `es.json`:

{
 "welcome": "¡Bienvenido a mi sitio web!",
 "description": "Este es un gran sitio web."
}

• إضافة ملفات الترجمة إلى المشروع:

يجب تضمين ملفات الترجمة في مشروعك. يمكن تخزين ملفات الترجمة في مجلد `locales` بداخل مجلد المشروع.

• تكوين i18next:

يجب تكوين i18next بحيث يتم تحميل ملفات الترجمة المناسبة تلقائيًا. يمكن القيام بذلك باستخدام مكتبة `i18next` ومكتبة `i18next-xhr-backend` التي توفر وظيفة `loadPath` لتحميل ملفات الترجمة.

import i18next from 'i18next';
import xhrBackend from 'i18next-xhr-backend';
i18next
 .use(xhrBackend)
 .init({
  lng: 'en',
  fallbackLng: 'en',
  debug: true,
  backend: {
   loadPath: '/locales/{{lng}}/{{ns}}.json'
  }
 });

في هذا المثال، يتم تحميل ملفات الترجمة بناءً على اللغة المحددة. يتم تحديد مسار تحميل الملفات باستخدام الخاصية `loadPath`، ويتم ترجمة النصوص تلقائيًا باستخدام i18next.

• تسمية النصوص المراد ترجمتها:

يجب تسمية النصوص المراد ترجمتها باستخدام العلامات الخاصة بـ i18next، مثل `data-i18n="key"`. يمكن استخدام مكتبة `jquery-i18next` لتحديد لغة المستخدم وتحميل الملفات المناسبة تلقائيًا.

HTML:

<h1 data-i18n="welcome"></h1>
<p data-i18n="description"></p>

JavaScript:

import i18next from 'i18next';
import jqueryI18next from 'jquery-i18next';
i18next
 .use(xhrBackend)
 .init({
  lng: 'en',
  fallbackLng: 'en',
  debug: true,
  backend: {
   loadPath: '/locales/{{lng}}/{{ns}}.json'
  }
 }, function() {
  jqueryI18next.init(i18next, $);
  $('body').localize();
 });

في هذا المثال، يتم تحميل ملفات الترجمة تلقائيًا باستخدام i18next، ويتم تحديد النصوص المراد ترجمتها باستخدام العلامات `data-i18n`. يتم تحديد قيمة النصوص المترجمة في ملفات الترجمة. تم استخدام مكتبة `jquery-i18next` لتحديد لغة المستخدم وتحميل الملفات المناسبة تلقائيًا، وتم استخدام `$('body').localize()` لترجمة جميع النصوص في الموقع.