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

هاله كمال · 4 أغسطس 2021

مرحبا

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

شكراً

Sam Ahw · 4 أغسطس 2021

في حال كان الموقع صغير الحجم والمحتوى بداخله ثابت (ٍ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 وتغيير المحتوى بناءً على اللغة التي تم اختيارها

هاله كمال · 4 أغسطس 2021

شكراً لك

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

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

HTML, CSS, JS, Bootstrap

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

تم التعديل في 4 أغسطس 2021 بواسطة هاله كمال

MoJaffer · 4 أغسطس 2021

في البداية انصحك بإستخدام اطار عمل مثل 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(); 
}

هاله كمال · 5 أغسطس 2021

بتاريخ 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/

شكرا لك

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

السؤال

هاله كمال

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

Recommended Posts

Sam Ahw

هاله كمال

MoJaffer

هاله كمال

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية