تحويل المحتوى من اللغة العربية للإنجليزية في صفحات الهبوط

وعليكم السلام ورحمة الله وبركاته

بالتأكيد يمكن القيام بهذا الأمر بأكثر من طريقة من خلال JavaScript حيث تقوم بعمل عنصر معين وليكن زر كالتالي:

<style>
  .text-en, .text-ar {
    display: none;
  }
</style>

<button class="text-en">Click Here</button>
<button class="text-ar">أضغط هنا</button>

 بشكل إفتراضي سيكون الزرين مخفيين من الصفحة، ونقوم بإظهار العناصر التي تحتوي على الصنف .text-en على سبيل المثال بإستخدام JavaScript من خلال الكود التالي:

const englishElements = document.querySelectorAll('.text-en');
englishElements.forEach((ele)=>{ele.style.display = 'unset'})	// القيمة unset تعني وكأننا لم نقم بإضافة الخاصية display إلى العنصر من الأساس

الآن يمكننا عمل دالة function تقوم بالتبديل بين اللغة العربية والإنجليزية بالشكل التالي:

const toggleLang = (lang) => {
  // إخفاء كل العناصر في البداية
  const allElements = document.querySelectorAll('[class^="text-"]');
  allElements.forEach((ele) => {
    ele.style.display = "none";
  });
  console.log(allElements.length);

  if (lang === "ar") {
    const englishElements = document.querySelectorAll(".text-ar");
    englishElements.forEach((ele) => {
      ele.style.display = "unset";
    });
  } else {
    const englishElements = document.querySelectorAll(".text-en");
    englishElements.forEach((ele) => {
      ele.style.display = "unset";
    });
  }
};

// إظهار العناصر باللغة الإنجليزية فقط
toggleLang('en');

// إظهار العناصر باللغة العربية فقط
toggleLang('ar');

بتاريخ 25 دقائق مضت قال سامح أشرف:

وعليكم السلام ورحمة الله وبركاته

بالتأكيد يمكن القيام بهذا الأمر بأكثر من طريقة من خلال JavaScript حيث تقوم بعمل عنصر معين وليكن زر كالتالي:

<style>
  .text-en, .text-ar {
    display: none;
  }
</style>

<button class="text-en">Click Here</button>
<button class="text-ar">أضغط هنا</button>

 بشكل إفتراضي سيكون الزرين مخفيين من الصفحة، ونقوم بإظهار العناصر التي تحتوي على الصنف .text-en على سبيل المثال بإستخدام JavaScript من خلال الكود التالي:

const englishElements = document.querySelectorAll('.text-en');
englishElements.forEach((ele)=>{ele.style.display = 'unset'})	// القيمة unset تعني وكأننا لم نقم بإضافة الخاصية display إلى العنصر من الأساس

الآن يمكننا عمل دالة function تقوم بالتبديل بين اللغة العربية والإنجليزية بالشكل التالي:

const toggleLang = (lang) => {
  // إخفاء كل العناصر في البداية
  const allElements = document.querySelectorAll('[class^="text-"]');
  allElements.forEach((ele) => {
    ele.style.display = "none";
  });
  console.log(allElements.length);

  if (lang === "ar") {
    const englishElements = document.querySelectorAll(".text-ar");
    englishElements.forEach((ele) => {
      ele.style.display = "unset";
    });
  } else {
    const englishElements = document.querySelectorAll(".text-en");
    englishElements.forEach((ele) => {
      ele.style.display = "unset";
    });
  }
};

// إظهار العناصر باللغة الإنجليزية فقط
toggleLang('en');

// إظهار العناصر باللغة العربية فقط
toggleLang('ar');

 

شكرا جدا..

ممكن اعمل ديف له اى دى يجمع كل عناصر المحتوى العربي..و ديف اخر يجمع كل عناصر المحتوى الانجليزي و اقوم بالتبديل مع الكليك..

منطقى؟؟

بتاريخ 22 ساعات قال Ahmed Monaiem:

شكرا جدا..

ممكن اعمل ديف له اى دى يجمع كل عناصر المحتوى العربي..و ديف اخر يجمع كل عناصر المحتوى الانجليزي و اقوم بالتبديل مع الكليك..

منطقى؟؟

 

بالتأكيد لا توجد مشكلة في هذا الأمر.

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

بتاريخ 39 دقائق مضت قال سامح أشرف:

بالتأكيد لا توجد مشكلة في هذا الأمر.

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

شكرا..

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

كما ان هاته الصفحة سيتم تكوينها على مستوى الخادم وارسالها الى المتصفح، (ان تكن لديك اي خبرة بتطوير الواجهة الخلفية فيمكنك المرور مباشرة الى الحل المقترح الثاني)

• فيما يلي صفحة PHP مثلا: 

  <?php 
  
  // جلب اللغة من الطلب
  // يمكن استعمال الجلسة او ملفات تعريف الارتباط مثلا لتخزين اللغة المفعلة
  $lang = $_GET['language'];
  
  // مصفوفة ترجممات
  $translations = [
         // الكلمات العربية
         'ar' => [
                 'home' => 'الرئيسية'
          ],
          
          // الكلمات الانجليزية
          'en' => [
                 'home' => 'main page'
          ]
  ];
  
  <html>
  <head>
      <title> <?php echo $translations[$lang]['home']; ?> </title>
  </head>
  
  <body>
  </body>
  <html>

   

• ففي حالة طلب المسار: 

  https://domain.co?lang=ar

  سيصير الخادم الصفحة كـ: 

  <html>
  <head>
      <title> الرئيسية </title>
  </head>
  
  <body>
  </body>
  <html>

  و في حالة طلب المسار: 

  https://domain.co?lang=en

  سيصير الخادم الصفحة كـ: 

  <html>
  <head>
      <title> Home </title>
  </head>
  
  <body>
  </body>
  <html>

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

الحل الثاني

وهو بمجرد انشاء صفحتي HTML واحدة للعربية وأخرى للانجليزية index.html و index-ar.html مثلا، أين سيمكن وضع كل محتوى بلغته المرافقة.