زر التبديل بين اللغات

Omar Mohamed Abdel Gawad · 24 أبريل

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

https://codepen.io/TorabRamin/pen/mqrBBj

Khaled Osama3 · 24 أبريل

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

إعداد i18next لتبديل اللغات

1. إضافة المكتبات:

لنبدأ بإضافة المكتبات اللازمة في ذيل الصفحة (HTML footer):

<script src="https://unpkg.com/i18next@21.5.3/i18next.min.js"></script>
<script src="https://unpkg.com/jquery@3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/i18next-browser-languagedetector@6.1.1/i18next-browser-languagedetector.min.js"></script>

2. تحضير ملفات اللغة:

نعمل ملفات JSON لكل لغة عايزين ندعمها. يعني لو الإنجليزية والبنغالية:

// en.json
{
  "greeting": "Hello"
}

// bn.json
{
  "greeting": "হ্যালো"
}

3. تهيئة i18next:

هنهيء i18next في ملف JavaScript:

i18next.use(i18nextBrowserLanguageDetector).init({
  resources: {
    en: {
      translation: {
        "greeting": "Hello"
      }
    },
    bn: {
      translation: {
        "greeting": "হ্যালো"
      }
    }
  },
  fallbackLng: 'en',
  detection: {
    order: ['querystring', 'cookie', 'localStorage', 'navigator', 'htmlTag'],
    caches: ['cookie']
  }
}, function(err, t) {
  // معالجة DOM باستخدام jQuery لتحديث النصوص
  updateContent();
});

function updateContent() {
  $('body').find('[data-i18n]').each(function() {
    var $this = $(this);
    var key = $this.data('i18n');
    $this.text(i18next.t(key));
  });
}

4. تحديث HTML لاستخدام i18next:

تأكد إن العناصر اللي عايز تغير لغتها معمول لها السمة data-i18n:

<body>
  <center>
    <div class="switch">
        <input id="language-toggle" class="check-toggle check-toggle-round-flat" type="checkbox" onclick="toggleLanguage()">
        <label for="language-toggle"></label>
        <span class="on">BN</span>
        <span class="off">EN</span>
    </div>
    <h1 data-i18n="greeting">Hello</h1>
  </center>
</body>

5. تبديل اللغات:

نضيف دالة لتبديل اللغة لما الزرار يتغير:

function toggleLanguage() {
  var newLang = i18next.language === 'en' ? 'bn' : 'en';
  i18next.changeLanguage(newLang, function(err, t) {
    if (err) return console.error('Something went wrong loading', err);
    updateContent();
  });
}

استخدام i18next بيسهل إدارة اللغات وتبديلها، وبيسمح بزيادة دعم لغات تانية بسهولة عن طريق إضافة ملفات JSON. كمان، الطريقة دي بتحسن تجربة المستخدم بإنه يقدر يغير اللغة من غير ما يحتاج يعيد تحميل الصفحة."

ولكن يوجد طرق اخري ابسط ولكن اقل شيوعا ولكن حسب استخدام الموقع بتاعك وتفضيل اي طريقه

محمد سعد شحرور · 24 أبريل

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

أي أن الرابط الحالي من الممكن أن يكون www.example.com/en للصفحة باللغة الانكليزية مثلا، والرابط التالي للغة العربية www.example.com/ar

ونستخدم الزر في هذه الحالة للتنقل فقط بين الصفحتين الانكليزية والعربية:

<button onclick="changeURL()">Change URL</button>

<script>
  function changeURL() {
    // Change the URL to a new page
    window.location.href = 'https://www.example.com/ar';
  }
</script>

زر التبديل بين اللغات

السؤال

Omar Mohamed Abdel Gawad

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

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

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

Recommended Posts

Khaled Osama3

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

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

محمد سعد شحرور

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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية