نادرًا ما تعتمد هندسة الويب الحديثة على 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 نظيف

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

، ،

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

أفضل ممارسة:

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

نص عائم

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

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

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

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

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

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

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

نفس المصدر:

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

مصدر مختلف:

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

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

ملخص

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

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