أفضل الممارسات

للوِب

يُحسِّن استخدام أنماط Markdown من قابلية القراءة ويسهّل الصيانة، سواء للمترجم أو لسكربتات موقع الويب الخاص بك التي ستستخرج المحتوى منها.

بالنسبة للمراسي المسماة في موقع متعدد اللغات، يتمثل أحد الأساليب المثيرة للاهتمام في "تثبيت" الروابط مباشرة بتصميم Markdown.

مثال: لعلامة

<h2/>

مع مرساة



التسمية في اللغة الحالية

تُعد نماذج اللغات الكبيرة (LLM) أكثر فعالية من البشر في حماية الروابط، ويسمح لك

LSDE

باكتشاف المشاكل بين الإصدارات اللغوية المختلفة.


وبهذا، يمكنك مشاركة رابط سيعمل في جميع اللغات واستخدام

LSDE

لإدارة استبدال مرساة مهملة.




غموض الكود

تجنب الغموض عند العمل مع النماذج الموجهة بالبيانات.


مثال:


ممارسة سيئة:

المصطلح 'key' ليس واضحًا ويجعل البحث عنه صعبًا.



ts
const PRODUCTS: Product[] = [
	{
		id: 'fcf7o',
		logo: '/icons/fcf7o-icon-40.webp',
		label: 'FCF7O',
		key: 'game:fcf7o.words.game_title',
	},
	{
		id: 'lsde',
		logo: '/icons/lsde-icon-40.webp',
		label: '<c1>LSDE</c1>',
		key: 'software:lsde.name',
	},
	{
		id: 'lsge',
		logo: '/icons/lsge.webp',
		label: 'LSGE',
		key: 'software:lsge.name',
	},
];


ممارسة جيدة:

اعتمد اصطلاحًا فريدًا ومتسقًا.


المصطلح

i18nKey

واضح جدًا ويسمح بالبحث الدقيق عن هذه القيمة عبر التعبيرات النمطية (

Regex

).


ts
const PRODUCTS: Product[] = [
	{
		id: 'fcf7o',
		logo: '/icons/fcf7o-icon-40.webp',
		label: 'FCF7O',
		i18nKey: 'game:fcf7o.words.game_title',
	},
	{
		id: 'lsde',
		logo: '/icons/lsde-icon-40.webp',
		label: '<c1>LSDE</c1>',
		i18nKey: 'software:lsde.name',
	},
	{
		id: 'lsge',
		logo: '/icons/lsge.webp',
		label: 'LSGE',
		i18nKey: 'software:lsge.name',
	},
];




الكسل

الأفكار السيئة تنبع من الكسل.


لا تسعَ لتوفير المفاتيح عن طريق إجراء عمليات لاسترداد المحتوى.


مثال:


javascript
const [title, subtitle] = t( 'game:game.title' ).split( /[:：]/ );

هذه فكرة جيدة خاطئة، لأن الأحرف قد تختلف في بعض اللغات، وقد يتغير ترتيب الكلمات.





تنسيق الوسوم

قلل قدر الإمكان من الكود المخصص للتصميم مباشرة في النص، للتحكم فيه من قاعدة الكود.


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


إذا كنت بحاجة إلى إجراء تعديلات تصميمية، فلا ترغب في الاضطرار إلى إعادة ترجمة نص إلى 10 لغات لمجرد تغيير نمط وسم!



يمكن أن تتضمن الوسوم معرفًا (ID)، لكن إضافة معلومات إضافية لا يُنصح به بشدة عمومًا ويُعتبر ممارسة سيئة.


مثال: لا تفعل


<img src='url' left />

بل افعل


<img id=1 />

ستسترجع بعد ذلك معرف (ID) وسم الصورة لتطبيق الأنماط الضرورية عليها في قاعدة الكود.


يجب استخدام المعرفات (IDs) حرفيًا وليس عبر مؤشرها.


في الواقع، في لغات مختلفة، قد يتم نقل الوسوم ولم تعد تتوافق مع المؤشر الأولي.


كما أن استخدام الفهارس الطبيعية يُدخل تعقيدًا للمطور؛ محاولة تخمين أي مؤشر يتوافق مع الصورة أو الوسم هي صداع حقيقي.


لذا، استخدم الوسوم ذات المعرف عندما ترغب في تخصيصها بعد الاستيفاء.





CSS

لترجمة موقع، عندما يكون لديك فقرات، اختر ارتفاعًا أدنى (`min-height`) بعد الترجمة لتجنب التغييرات المرئية عند تبديل اللغات.


مثال: `mih={'3lh'}`


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



النطاق


قم دائمًا بتضمين 'namespace' في مفاتيح الترجمة الخاصة بك، حتى لو كان لديك واحد فقط.

هذا يسهل بشكل كبير إعداد نمط Regex للعثور على مفاتيحك.


مثال:

game:a.b.c

،

common:a.b.c