اذهب إلى المحتوى
  • 0

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

هاله كمال

السؤال

Recommended Posts

  • 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 وتغيير المحتوى بناءً على اللغة التي تم اختيارها

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

  • 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(); 
}

 

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

  • 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/

شكرا لك 

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

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...