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

وعليكم السلام
هذا الأمر سهل إذا كنت سوف تستخدم إحدى أطر العمل مثل PHP Laravel فهناك مكتبات تدعم الترجمة مثل مكتبة Dimsav, إنما في حال أردت إنشاء موقع بواسطة الووردبريس هناك إضافة إسمها Polylang من خلالها تستطيع إضافة أي لغة تريدها من لغات العالم.

لكن إذا رغبت تطوير الموقع ببرمجة عادية Pure هنا يتطلب منك إنشاء ملف خاص لكل لغة.

بتاريخ 34 دقائق مضت قال Nabil Tayeh:

وعليكم السلام
هذا الأمر سهل إذا كنت سوف تستخدم إحدى أطر العمل مثل PHP Laravel فهناك مكتبات تدعم الترجمة مثل مكتبة Dimsav, إنما في حال أردت إنشاء موقع بواسطة الووردبريس هناك إضافة إسمها Polylang من خلالها تستطيع إضافة أي لغة تريدها من لغات العالم.

لكن إذا رغبت تطوير الموقع ببرمجة عادية Pure هنا يتطلب منك إنشاء ملف خاص لكل لغة.

شكرا لك ... ماهي الطريقه التي يستخدمها سناب شات من الطرق التي ذكرتها 
https://www.snap.com/ar

بتاريخ 1 دقيقة مضت قال Khaled Almousawi:

شكرا لك ... ماهي الطريقه التي يستخدمها سناب شات من الطرق التي ذكرتها 
https://www.snap.com/ar

المواقع والتطبيقات الضخمة غالباً ما يكون لها برمجتها الخاصة Pure, أو تستخدم إحدى أطر العمل مثل PHP Laravel, بإستخدام إحدى الطريقتين بإمكاننا الحصول على نفس النتيجة.
الأمر يعود فقط لمطور الويب.

حسناً، هناك العديد من الطرق لجعل الموقع متعدد اللغات ويختلف الأمر إن كان الموقع ديناميكي أو ستاتيكي.

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

الأمر معقد نوعا ما في المواقع الديناميكية بسبب تحديث المحتوى بإستمرار وربطه مع قواعد بيانات، لذلك معظم المطورين يعتمدون على إنشاء جدول لكل لغة مثل جدول البلوغ، فقد نجد:

BlogEn

BlogAr

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

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

قد لا تبدو مسألة توفير عدد من اللغات بالأمر السهل، ولكن عند الإعتماد على Web Frameworks مثل PHP Laravel أو Ruby on Rails فإن كل بيئة توفر مكاتب تجعل من الأمر بسيطا.

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

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

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

فيمكنك فعل ذلك عن طريق إحدى الطرق التالية

1/ إذا كان الموقع بصفة عامة static فبالتالي تحتاج إنشاء ملف لكل لغة والتبديل بينهما برمجياً.
2/ من وجهة نظر ال Backend فيمكنك الإطلاع على الأجوبة السابقة حيث أنها تحتوي على التفاصيل الكاملة.

3/ من وجهة نظر ال Frontend فمثلاً إذا كنت تستخدم مكتبة React js فأنصحك بأن تطلع على مفهوم ال React Context  وهذا المفهوم هو أول خطواتك لتنفيذ ما تريد تابع معي الطريقة 
أولاً وليكن لديك ملف Context إسمه languageContext.js وبداخل هذا الملف دالة تسمح بتعديل اللغة الحالية ولتكن مثلا 
 

/*  languageContext.js   */
/* بالطبع يجب الإطلاع على كيفية كتابة 
	context
لأنى لم أشرح تفاصيله 
 */
export default class LanguageContext extends Component {
	state = {
    	language: 'ar'
    }

	componentDidMount() {
    	/*
        في البداية مثلا عندما يسجل المستخدمة الدخول تكون مثلاً اللغة المفضلة محفوظة مسبقاً فى 
localStorage API
        */
      
      const currentLang = localStorage.getItem('lang');
      
      this.setState({
		language: currentLang
	  })
    }

	/*
    	وأيضاً يوجد دالة لتعديل اللغة عند الضغط مثلاً على إسم اللغة
    */

	changeLangOnDemand = (language) => {
    	this.setState({ language });
    }
	
    
    render() {
		return(
        	/* بالطبع يجب تمرير الدالة إلى الملف الجديد بعد تحويله عن طريق ال 
				CONTEXT
			 */
        	<NewComponent 
          		{ ...this.state, changeLangOnDemand }
          	/>
        );
	}

}

ثانياً فى الملف حيث ال LangDropDown يجب أن تربطها بال Context وبالأخص دالة changeOnDemand 
ثالثاّ : فى جميع ملفاتك يجب أن تستخدم ملف strings كمثال 
 

/* الملفات العادية */

import strings from './strings';

<button>{strings.selectLanguage}</button>




/* فى ملف اللغات يجب أن تنفذ الآتى  */
/*  بالطبع يجب أن تحصل على قيمة اللغة الحالية من ال 
	context
 */
import context from './languageContext';

const language = () => ({
  ar: {
  	selectLanguage: 'إختر لغة'
  },
  en: {
  	selectLanguage: 'selectLanguage'
  }

});

export default language[context.language];

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