تغير لغة الموقع

بلال قدور · 8 أغسطس 2023

عندي موقع مكتوب ب html,css,js

أريد إضافة زر يحول الموقع إلى اللغة الإنكليزية.

Kais Hasan · 8 أغسطس 2023

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

window.location.href = "http://example.com/new_url";

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

الطريقة الأولى أسهل، و لكن في حال كنت جديد و تريد التدريب على بعض الأمور المعقدة قليلاً جرب الطريقة الثانية.

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

Mustafa Suleiman · 8 أغسطس 2023

ستحتاج أولاً إلى توفير نسخة مترجمة من الموقع، ولتسهيل الأمر عليك من الأفضل استخدام مكتبة جافاسكريبت خاصة بالترجمة مثل i18next و Polyglot.js، وقد تم شرح الأمر بشكل مفصل هنا:

وإليك مثال على الإصدار 23 من i18next:

HTML:

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="utf-8">
  <title>i18next Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/23.4.2/i18next.min.js" integrity="sha512-M4iruTNlnwfFL71Q+5fMOLe6gY3k6hq795GafcfVovObnhvz9h+DtaVdaP92Bjaai808vO8Iq5XPn9eW3VwVWw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div id="content">
  <p data-i18n="welcome"></p>
  <p data-i18n="description"></p>
</div>
<button id="changeLanguage">Change Language</button>


</body>
</html>

JS:



// تكوين i18next
i18next.init({
  lng: 'ar', // اللغة الافتراضية
  debug: true,
  resources: {
  ar: {
       translation:{
 "welcome": "مرحبًا بك في الموقع!",
    "description": "هذا مثال بسيط باستخدام i18next."
       }
   
  },
  en: {
      translation:{
            "welcome": "Welcome to the website!",
    "description": "This is a simple example using i18next."
      }
  }
  }
}, function(err, t) {
  // تحميل الترجمات بعد التهيئة
  updateContent();
});

// دالة لتحديث المحتوى المترجم
function updateContent() {
  document.querySelector('[data-i18n="welcome"]').textContent = i18next.t('welcome');
  document.querySelector('[data-i18n="description"]').textContent = i18next.t('description');
}

// التبديل بين اللغات
document.getElementById('changeLanguage').addEventListener('click', function() {
  const newLanguage = i18next.language === 'ar' ? 'en' : 'ar';
  i18next.changeLanguage(newLanguage, function(err, t) {
    if (err) return console.log('something went wrong loading', err);
    updateContent();
  });
});