مشروع التخرج

منذ 5 ساعة

طلب مني أن يكون المشروع عربي ، اجعل المشروع يدعم اللغتين عربي و انجليزي؟ لقد قمت بعمله ب الانجليزي فقط

منذ 5 ساعة

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

منذ 5 ساعة

بتاريخ 5 دقائق مضت قال Chihab Hedidi:

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

الله يعطيك العافية، قبل النظر للمشروع أرجو تنفيذ التالي:

1. المشروع يجب أن يكون باللغة العربية

2. ربط المشروع مع github pages

3. إضافة أوامر تشغيل المشروع في ملف readme

أخبرني بهذا بعدما ارسلت له رابط المشروع

منذ 3 ساعة

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

بالطبع i18next.js مع الـ JavaScript والـ DOM، ستقوم بتضمين i18next.js في صفحة HTML الخاصة بك واستخدامها لترجمة النصوص في عناصر DOM

كمثال على افتراض أنك تستخدم HTML, CSS, JS فقط وليس React:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>My multilingual website</title>
  <script src="https://cdn.jsdelivr.net/npm/i18next@23.5.1/dist/umd/i18next.min.js"></script>
</head>
<body>
  
  <button onclick="changeLanguage('en')">English</button>
  <button onclick="changeLanguage('ar')">العربية</button>
  <hr>

  <h1 data-i18n="greeting">Hello, world!</h1>
  <p data-i18n="description">This is a multilingual website.</p>
  <button data-i18n="btn_login">Login</button>

  <script>
    const resources = {
      en: {
        translation: {
          greeting: 'Hello, world!',
          description: 'This is a multilingual website.',
          btn_login: 'Login'
        }
      },
      ar: {
        translation: {
          greeting: 'أهلاً بالعالم!',
          description: 'هذا موقع متعدد اللغات.',
          btn_login: 'تسجيل الدخول'
        }
      }
    };

    const savedLanguage = localStorage.getItem('userLang') || 'en';

    i18next.init({
      lng: savedLanguage, 
      fallbackLng: 'en',  
      resources: resources
    }, function(err, t) {
      if (err) return console.error(err);
      updateContent(); 
    });

    function updateContent() {
      document.querySelectorAll('[data-i18n]').forEach(element => {
        const key = element.getAttribute('data-i18n');
        element.textContent = i18next.t(key);
      });

      const currentLang = i18next.language;
      document.documentElement.lang = currentLang;
      document.documentElement.dir = currentLang === 'ar' ? 'rtl' : 'ltr';
    }

    function changeLanguage(lang) {
      i18next.changeLanguage(lang, function(err, t) {
        if (err) return console.error(err);
        
        localStorage.setItem('userLang', lang); 
        updateContent(); 
      });
    }
  </script>
</body>
</html>

استخدام querySelectorAll، لوضع data-i18n على 1000 عنصر حتى، وسيقوم الكود بترجمتها جميعاً دون كتابة سطر جافاسكريبت إضافي واحد.

وإضافة أزرار لتغيير اللغة، مع حفظ الاختيار في localStorage لكي يتذكره المتصفح في الزيارة القادمة.

وتغيير خاصية dir في وسم <html> تلقائياً.

مشروع التخرج

السؤال

Ibrahim Almahdy

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

Recommended Posts

Chihab Hedidi

Ibrahim Almahdy

Mustafa Suleiman

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

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية