Omar Mohamed Abdel Gawad نشر 24 أبريل أرسل تقرير مشاركة نشر 24 أبريل كيف يمكنني جعل زر التبديل بين اللغات في الصفحة مثل هذا يعمل وينقلني إلى الصفحة باللغة الأخرى عند الضغط عليه؟ https://codepen.io/TorabRamin/pen/mqrBBj 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Khaled Osama3 نشر 24 أبريل أرسل تقرير مشاركة نشر 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. كمان، الطريقة دي بتحسن تجربة المستخدم بإنه يقدر يغير اللغة من غير ما يحتاج يعيد تحميل الصفحة." ولكن يوجد طرق اخري ابسط ولكن اقل شيوعا ولكن حسب استخدام الموقع بتاعك وتفضيل اي طريقه اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمد سعد شحرور نشر 24 أبريل أرسل تقرير مشاركة نشر 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> اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Omar Mohamed Abdel Gawad
كيف يمكنني جعل زر التبديل بين اللغات في الصفحة مثل هذا يعمل وينقلني إلى الصفحة باللغة الأخرى عند الضغط عليه؟
https://codepen.io/TorabRamin/pen/mqrBBj
رابط هذا التعليق
شارك على الشبكات الإجتماعية
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.