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

بلال قدور · 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();
  });
});

وستجد المزيد في الموقع الرسمي:

https://www.i18next.com/overview/getting-started

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

السؤال

بلال قدور

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

Recommended Posts

Kais Hasan

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية