نادراً ما تعتمد هندسة الويب الحديثة على HTML الثابت. يتم حقن المحتوى عبر JavaScript، أو جلبه عبر واجهات برمجة التطبيقات، أو عرضه من جانب العميل باستخدام أطر عمل مثل React أو Vue. تم تصميم MultiLipi للتعامل مع هذا "DOM المتقلب". لا يقوم برنامجنا النصي بترجمة الصفحة مرة واحدة عند التحميل فحسب؛ بل ينشئ اتصالاً مستمرًا MutationObserver لاكتشاف وترجمة العقد الجديدة فور إدخالها في شجرة DOM.

يشرح هذا الدليل كيف تتعامل البنية التحتية لدينا مع حمولة ديناميكية، طلبات AJAX، وحالات تفاعلية.

1. تحدي المحتوى "المتقلب"

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

يدعم MultiLipi:

التصيير على جانب العميل (CSR)

التطبيقات المبنية على React، Vue، Angular، أو Svelte.

عمليات الجلب غير المتزامنة

المحتوى الذي تم تحميله عبر واجهات برمجة تطبيقات AJAX/Fetch (مثل التمرير اللانهائي أو نتائج البحث).

الحالات التفاعلية

أخطاء التحقق من صحة النموذج، وإجمالي سلة التسوق، وإشعارات التنبيه.

2. الهندسة المعمارية التقنية

كيف نترجم دون كسر تطبيقك.

محرك JavaScript الخاص بنا يقوم بتشغيل عملية مراقبة مستمرة على جانب العميل:

مراقبة DOM:

MutationObserver

نحن نستخدم واجهة برمجة تطبيقات MutationObserver الأصلية للمتصفح لمراقبة التغييرات في .

الكشف:

عندما يقوم تطبيقك بحقن

جديد (مثل فتح نافذة منبثقة)، يقوم المراقب الخاص بنا بتمييزه على الفور.

حقن فوري:

< 50 مللي ثانية

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

الحفاظ على الحالة:

عقد نصية فقط

نحن نعدل فقط عقد النص. نحن لا ندمر عناصر DOM أو نزيل مستمعي الأحداث، مما يضمن بقاء روابط React/Vue الخاصة بك سليمة.

3. أفضل الممارسات للنصوص الديناميكية

لضمان عمل MutationObserver بكفاءة، اتبع إرشادات البنية هذه:

عقد نصية مستقرة

تجنب النصوص التي تتغير كل ثانية (مثل مؤقت العد التنازلي: "00:01"، "00:02"). يؤدي هذا إلى إغراق محرك الترجمة بآلاف الطلبات الفريدة.

النهج الموصى به:

الوقت: 00:01

تغليف HTML نظيف

تأكد من أن النص مغلف بعلامات محددة (

, ,

) بدلاً من تركه عائمًا غير منظم في . هذا يساعد المراقب على عزل المقطع.

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

النص الخاص بك هنا

نص غير منظم

تجنب تأثيرات "الكتابة"

البرامج النصية التي "تكتب" النص حرفًا بحرف (k... ka... kat... kata) تربك محركات الترجمة. اعرض سلسلة النص بالكامل دفعة واحدة.

نصيحة التنفيذ:

// Render complete text instead of character-by-character animation
<p>{fullText}</p>

4. حالة خاصة: iFrames

ملاحظة حول قيود المصدر المتقاطع.

إذا كان المحتوى الديناميكي الخاص بك موجودًا داخل iFrame (على سبيل المثال، أداة دردشة خارجية أو بوابة دفع):

نفس الأصل:

إذا كان iFrame مستضافًا على نطاقك، MultiLipi يمكن ترجمته.

أصل مشترك:

إذا تم تحميل إطار iFrame من نطاق خارجي ، (مثل Stripe، Intercom)، نحن لا يمكن ترجمته بسبب سياسات أمان المتصفح (CORS).

يجب عليك تكوين إعدادات الترجمة داخل هذه الأداة الخارجية مباشرةً.

الملخص

لا تحتاج إلى تثبيت حزم SDK محددة لـ React أو Angular. بمجرد تنشيط برنامج MultiLipi النصي، فإنه يتكامل تلقائيًا مع محرك العرض في المتصفح لترجمة أي محتوى —ثابت أو ديناميكي— التي تظهر على الشاشة.

كيفية ترجمة المحتوى الديناميكي باستخدام MultiLipi