• 0

إنشاء موقع يدعم لغتين

مرحبا 

ما هي افضل طريقة لعمل موقع يدعم لغتين  باستخدام html, css, JS, Bootstrap 

شكراً 

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

في حال كان الموقع صغير الحجم والمحتوى بداخله ثابت (ٍStatic) أي لا يتم التواصل مع طرف الخادم لجلب المعلومات، يمكنك استخدام خاصيات الإخفاء والإظهار للنصوص التي تدعمها CSS مع تكرار نفس الصفحة لكل لغة:

display: block

display: none

مثال بسيط:

<html>
  <head>
    <style type="text/css">
      body.fr > p[lang=en] {
        display: none;
      }
      body.en > p[lang=fr] {
        display: none;
      }
    </style>
  </head>
  <body class="en">
    <button onclick="document.body.className='en'">English</button>
    <button onclick="document.body.className='fr'">French</button>
    <p lang="en">English text here</p>
    <p lang="fr">French text here</p>
  </body>
</html>

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

باستخدام الجافاسكريبت ستصبح المهمّة أسهل بكثير، حيث يمكننا تخزين اللغة التي اختارها المستخدم ضمن المتصفح localStorage و sessionStorage وأيضاً ستتيح لنا العديد من الطرق للتغيير بين هذه اللغات، ومن أبسط هذه الطرق هو جمع المحتوى النصي في ملفات JSON وتغيير المحتوى بناءً على اللغة التي تم اختيارها

1 شخص أعجب بهذا

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

شكراً لك 

لدي موقع سيرة ذاتية باللغة الانجليزية واريد اضافة اللغة العربية 

الموقع مبني باستخدام 

HTML, CSS, JS, Bootstrap 

ما هي الطريقة الافضل لجعل الموقع باللغتين؟ 

تمّ تعديل بواسطة هاله كمال

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

في البداية انصحك بإستخدام اطار عمل مثل vue.js أو React.js لتسهيل العمل 

ولكن في حالتك إن اردت فعل ذلك بإمكانك فعلها بإستخدام الجافاسكريبت 

الفكرة هنا هي تعريف متغييرين اثنين الأول ستسميه مثلاً ar والآخر ستسميه مثلاً en وبداخل كل متغيير ستضيف كائن وفي كل كائن ستضيف عدة Properties ستضيف فيها جميع النصوص الكلمات التي تريدها

بعدها سنقوم بتعريف متغيير اخر وهذا المتغيير سيتم فيه تحديد اللغة التي تريدها 

واخيراً بعدها ستقوم بإنشاء دالة من خلالها ستقوم بتغيير هذا المتغيير 

دعنا نأخذ المثال للتضح لك الصورة بشكل افضل 

اولاً HTML

<h2 id="hello"></h2> <!-- هنا سيظهر النص -->
<p id="text"></p>
<!-- هنا لتتغير اللغة عند الضغط -->
<button onclick="setLang('en')">English</button>
<button onclick="setLang('ar')">عربي</button>

ثانياً : الجافاسكريت 

// هنا حيث نقوم بتخزين الكلمات والعبارات التي نريدها لكل لغة في متغيير منفصلين
var ar = { hello: "مرحباً!!", text: 'تغيير اللغة' };
var en = { hello: 'Hello!!', text: 'Change language' };
var language = ar; // تحديد اللغة

// تغيير نص HTML
function changeText(){
 for (const key in language) {

     document.getElementById(key).innerText = language[key];
  }
}
changeText(); 


// تغيير اللغة عند الضغط على ازرار تغيير اللغة
var setLang = function (lang){
  lang === 'ar' ? language = ar : language = en;
	changeText(); 
}

 

2 اشخاص أعجبوا بهذا

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ On 8/4/2021 at 17:00 قال MoJaffer:

في البداية انصحك بإستخدام اطار عمل مثل vue.js أو React.js لتسهيل العمل 

ولكن في حالتك إن اردت فعل ذلك بإمكانك فعلها بإستخدام الجافاسكريبت 

الفكرة هنا هي تعريف متغييرين اثنين الأول ستسميه مثلاً ar والآخر ستسميه مثلاً en وبداخل كل متغيير ستضيف كائن وفي كل كائن ستضيف عدة Properties ستضيف فيها جميع النصوص الكلمات التي تريدها

بعدها سنقوم بتعريف متغيير اخر وهذا المتغيير سيتم فيه تحديد اللغة التي تريدها 

واخيراً بعدها ستقوم بإنشاء دالة من خلالها ستقوم بتغيير هذا المتغيير 

دعنا نأخذ المثال للتضح لك الصورة بشكل افضل 

اولاً HTML


<h2 id="hello"></h2> <!-- هنا سيظهر النص -->
<p id="text"></p>
<!-- هنا لتتغير اللغة عند الضغط -->
<button onclick="setLang('en')">English</button>
<button onclick="setLang('ar')">عربي</button>

ثانياً : الجافاسكريت 


// هنا حيث نقوم بتخزين الكلمات والعبارات التي نريدها لكل لغة في متغيير منفصلين
var ar = { hello: "مرحباً!!", text: 'تغيير اللغة' };
var en = { hello: 'Hello!!', text: 'Change language' };
var language = ar; // تحديد اللغة

// تغيير نص HTML
function changeText(){
 for (const key in language) {

     document.getElementById(key).innerText = language[key];
  }
}
changeText(); 


// تغيير اللغة عند الضغط على ازرار تغيير اللغة
var setLang = function (lang){
  lang === 'ar' ? language = ar : language = en;
	changeText(); 
}

هنا رابط للمعاينة : 

https://jsfiddle.net/m1awz89c/1/

شكرا لك 

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن