كيف يمكن دعم تعددية اللغات في مشاريع الواجهة الأمامية ؟

Anas Badawy · 28 يوليو 2023

انا لدي موقع html css js bootstrap وطلب العميل ان يكون الموقع باللغة العربية والانجليزية

فما هي الطرق وما هي افضل طريقة

وهل توجد طريقة ديناميكية للترجمة الموقع الي لغتين او اكثر

أسامة زيادة · 28 يوليو 2023

لتحقيق تعدد اللغات في موقعك الذي تم تطويره باستخدام HTML وCSS وJavaScript وBootstrap، يمكنك اتباع بعض الطرق. هناك طرق مختلفة لتحقيق الترجمة إلى لغتين أو أكثر،

استخدام ملفات النصوص المترجمة (Translation Files)
يمكنك إنشاء ملفات نصية (مثل JSON أو XML) لكل لغة تريد دعمها في الموقع. هذه الملفات ستحتوي على مفاتيح وقيم للنصوص المستخدمة في الموقع باللغات المختلفة. ثم يمكن استخدام JavaScript لتحميل الملف المناسب بناءً على لغة المستخدم وتحويل النصوص ووضعها في العناصر المناسبة في الصفحة.

استخدام خدمات الترجمة عبر الويب
هناك خدمات عبر الإنترنت تسمح لك بترجمة النصوص ديناميكياً إلى لغات مختلفة. يمكنك استخدام واحدة من هذه الخدمات ودمجها في موقعك باستخدام واجهة برمجة التطبيقات (API) التي توفرها هذه الخدمات.

استخدام مكتبات جاهزة للترجمة
هناك مكتبات جاهزة في JavaScript تسمح لك بتحقيق الترجمة بشكل ديناميكي. مثال على ذلك هو "i18next" وهي مكتبة قوية تدعم العديد من الميزات لإدارة الترجمة في مشاريعك.

بالنسبة للطريقة الأفضل، فذلك يعتمد على متطلبات مشروعك ومدى تعقيد الترجمة الذي ترغب في تحقيقه. إذا كان لديك عدد قليل من النصوص ولغات قليلة، فاستخدام ملفات الترجمة يمكن أن يكون الأسهل والأكثر فعالية. ولكن إذا كانت الموقع يتضمن الكثير من النصوص وعدة لغات، فقد تكون الاستعانة بخدمات الترجمة عبر الويب أو استخدام مكتبات الجاهزة للترجمة هو الخيار الأكثر مناسب. يجب أن تأخذ في اعتبارك أن الترجمة الآلية ليست دقيقة دائمًا، وقد تحتاج إلى مراجعة وتدقيق بشري للتأكد من دقة الترجمة. قد تتطلب هذه العملية جهدًا إضافيًا، ولكنها قد تستحق لتوفير تجربة مستخدم أفضل وتوصيل المحتوى بشكل أكثر فعالية لجميع المستخدمين في مختلف اللغات.

Adnane Kadri · 29 يوليو 2023

أجد أن أفضل طريقة هي بإستعمال مجمع وحدات مثل webpack لتسهيل التعامل مع مثل هاته الجزئية، يوجد مثلا حزمة claudetech/node-static-i18n التي تسهل توليد ملفات HTML مترجمة ابتداءا من كائنات JSON تصف هاته اللغات.

بداية قم بتحويل مشروعك إلى مشروع webpack وثبت الحزم والمحملات اللازمة.

ثانيا، قم بتثبيت هاته الحزمة عن طريق الأمر:

npm install -g static-i18n

الآن سوف لن تحتاج إلا توصيف مفاتيح العبارات المراد ترجمتها:

<html>
  <head>
    <script src="js/app.js"></script>
  </head>
  <body>
    <h1 data-t="my.key"></h1>
    <p data-t>other.key</p>
    <input type="submit" data-attr-t value-t="other.ok">
  </body>
</html>

ملف locales/en.json:

{
  "my": {
    "key": "Hey"
  },
  "other": {
    "key": "man",
    "ok": "confirm"
  }
}

ملف locales/fr.json:

{
  "my": {
    "key": "Salut"
  },
  "other": {
    "key": "mec",
    "ok": "confirmer"
  }
}

ثم قم بتنفيذ الأمر:

static-i18n -l en -i en -i fr dist

بعد امر npm run build لتخريج نسختين لكل ملف HTML. واحدة باللغة الفرنسية والأخرى بالانجليزية. وهذا كمثال فقط، يمكنك التوسع في الفكرة أكثر.

Mustafa Suleiman · 29 يوليو 2023

من الأسهل لك أن تعتمد على مكتبة جافاسكريبت لترجمة الموقع، وأشهرها مكتبة i18next وتلك المكتبة توفر دعمًا شاملاً للترجمة وتحكم في النصوص والتنقل بين اللغات، ويمكن استخدامها في مشروع HTML/CSS/JS لديك وتتضمن خيارات مثل تحميل الملفات من الملقم أو استخدام خدمات الترجمة الآلية.

يوجد أيضًا مكتبة Polyglot.js وهي مكتبة JavaScript صغيرة وخفيفة الوزن للترجمة، في حال كنت تبحث عن حلاً بسيطًا وغير معقد، فستجد Polyglot.js خيارًا جيدًا، وتم تطوير تلك المكتبة بواسطة Airbnb.

وبالطبع ستحتاج إلى استخدم bundler (محزم) من أجل تجميع ملفات المشروع مثل Vite أو Webpack وفي حال أردت تسهيل الأمر تستطيع استيراد مكتبة مثل i18next عن طريق CDN من الرابط التالي:

<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/23.4.0/i18next.min.js" integrity="sha512-M4iruTNlnwfFL71Q+5fMOLe6gY3k6hq795GafcfVovObnhvz9h+DtaVdaP92Bjaai808vO8Iq5XPn9eW3VwVWw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

ثم قم بإنشاء ملفات الترجمة في مجلد اللغة العربية (ar.json):

{
  "greeting": "مرحبًا بالعالم"
}

في مجلد اللغة الإنجليزية (en.json):

{
  "greeting": "Hello, world"
}

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>مثال باستخدام i18next</title>
</head>
<body>
  <h1 id="greeting"></h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/23.4.0/i18next.min.js" integrity="sha512-M4iruTNlnwfFL71Q+5fMOLe6gY3k6hq795GafcfVovObnhvz9h+DtaVdaP92Bjaai808vO8Iq5XPn9eW3VwVWw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>
    i18next.init({
      lng: 'en', // يمكن تغييرها إلى 'ar' للعربية
      resources: {
        en: {
          translation: {
            "greeting": "Hello, world"
          }
        },
        ar: {
          translation: {
            "greeting": "مرحبًا بالعالم"
          }
        }
      }
    }, function(err, t) {
      // تحميل النصوص بعد التهيئة
      updateContent();
    });

    function updateContent() {
      // تحديث النصوص في الصفحة باستخدام i18next
      document.getElementById('greeting').innerText = i18next.t('greeting');
    }
  </script>
</body>
</html>

ونفس الأمر بالنسبة

<script src="https://cdnjs.cloudflare.com/ajax/libs/polyglot.js/2.2.2/polyglot.min.js"></script>

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>مثال باستخدام Polyglot.js</title>
</head>
<body>
  <h1 id="greeting"></h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/polyglot.js/2.2.2/polyglot.min.js"></script>
  <script>
    const phrases = {
      en: {
        "greeting": "Hello, world"
      },
      ar: {
        "greeting": "مرحبًا بالعالم"
      }
    };

    // يمكن تغيير 'en' إلى 'ar' للعربية
    const currentLanguage = 'en';

    const polyglot = new Polyglot({ phrases: phrases[currentLanguage] });

    function updateContent() {
      // تحديث النصوص في الصفحة باستخدام Polyglot.js
      document.getElementById('greeting').innerText = polyglot.t('greeting');
    }

    // استدعاء الدالة للتحديث الأولي
    updateContent();
  </script>
</body>
</html>

محمد Fahmy · 2 أغسطس 2023

يمكنك استخدام خدمات الترجمة الآلية مثل Google Translate API ومع ذلك، يجب ملاحظة أنه على الرغم من تحسينها في الآونة الأخيرة، إلا أن جودة الترجمة الآلية قد تكون أقل من الترجمة البشرية.

هذا مثال بسيط لاستخدام خدمة ترجمة النصوص الآلية باستخدام خدمة Google Translate API في لغة javascript :

// استيراد حزمة google-translate-api
const translate = require('google-translate-api');

// ترجمة النص "Hello" من اللغة الإنجليزية إلى اللغة العربية باستخدام خدمة Google Translate API
translate('Hello', {to: 'ar'})
    .then(res => {
        console.log(res.text); // النتيجة: "مرحبا"
    })
    .catch(err => {
        console.error(err);
    });

في هذا المثال، تم استيراد حزمة `google-translate-api` واستخدامها لترجمة النص "Hello" من اللغة الإنجليزية إلى اللغة العربية.

يتم استخدام خيار `{to: 'ar'}` لتحديد اللغة المستهدفة للترجمة، ويتم استيراد النتيجة باستخدام `then()` ويتم عرضها في وحدة التحكم باستخدام `console.log()`. في حالة وجود أي أخطاء، يتم معالجتها باستخدام `catch()` ويتم عرضها في وحدة التحكم باستخدام `console.error()`.

كيف يمكن دعم تعددية اللغات في مشاريع الواجهة الأمامية ؟

السؤال

Anas Badawy

4 أجوبة على هذا السؤال

Recommended Posts

أسامة زيادة

Adnane Kadri

Mustafa Suleiman

محمد Fahmy

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية