आधुनिक वेब आर्किटेक्चर शायद ही कभी स्टैटिक HTML पर निर्भर करता है। सामग्री JavaScript के माध्यम से इंजेक्ट की जाती है, APIs के माध्यम से प्राप्त की जाती है, या frameworks जैसे रिएक्ट, व्यू, एंगुलर, या स्वेल्ट पर आधारित क्लाइंट-साइड रेंडरिंग का उपयोग करके प्रस्तुत की जाती है। React या Vue. MultiLipi इसे संभालने के लिए इंजीनियर किया गया है "वाष्पशील DOM।" आईफ़्रेम MutationObserver जैसे ही नए नोड्स DOM ट्री में इंजेक्ट होते हैं, उनका पता लगाने और अनुवाद करने के लिए।

यह गाइड बताती है कि हमारा इंफ्रास्ट्रक्चर कैसे संभालता है डायनामिक पेलोड, AJAX अनुरोध और इंटरैक्टिव स्टेट्स.

1. "अस्थिर" सामग्री की चुनौती

मानक अनुवाद प्रॉक्सी प्रारंभिक लोड के बाद सामग्री बदलने पर विफल हो जाते हैं।

मल्टीलिपि सपोर्ट करता है:

क्लाइंट-साइड रेंडरिंग (CSR)

रिएक्ट, व्यू, एंगुलर, या स्वेल्ट पर निर्मित ऐप्स।

क्लाइंट साइड पर:

AJAX/Fetch APIs के माध्यम से लोड की गई सामग्री (जैसे, अनंत स्क्रॉल या खोज परिणाम)।

इंटरैक्टिव स्टेट्स

फ़ॉर्म सत्यापन त्रुटियाँ, कार्ट योग, और सूचना टॉस्ट।

2. इंजीनियरिंग आर्किटेक्चर

3. डायनामिक टेक्स्ट के लिए सर्वोत्तम अभ्यास

हमारा JavaScript इंजन एक निरंतर निगरानी प्रक्रिया हमारे हेल्प सेंटर में डायनामिक कंटेंट का अनुवाद करने के बारे में अधिक जानें।

DOM अवलोकन:

MutationObserver

आपका टेक्स्ट यहाँ

ढीला टेक्स्ट

डिटेक्शन:

जब आपका ऐप एक नया

इंजेक्ट करता है (जैसे, एक मोडल खोलना), तो हमारा ऑब्जर्वर इसे तुरंत फ़्लैग करता है।

तत्काल इंजेक्शन:

< 50ms

टेक्स्ट को हमारे स्थानीय कैश या API पर भेजा जाता है। यदि मेमोरी में अनुवाद मौजूद है, तो इसे तुरंत बदल दिया जाता है (अक्सर 50ms से कम में), जो उपयोगकर्ता के लिए निर्बाध रूप से दिखाई देता है।

स्थिति संरक्षण:

केवल टेक्स्ट नोड्स

हम केवल टेक्स्ट नोड्स को संशोधित करते हैं। हम DOM तत्वों को नष्ट नहीं करते हैं या ईवेंट श्रोताओं को हटाते नहीं हैं, यह सुनिश्चित करते हुए कि आपकी React/Vue बाइंडिंग बरकरार रहें।

हमारी स्क्रिप्ट केवल लोड होने पर एक बार पेज का अनुवाद नहीं करती है; यह एक स्थायी

यह सुनिश्चित करने के लिए कि MutationObserver कुशलता से काम करे, इन वास्तुशिल्प दिशानिर्देशों का पालन करें:

स्थिर टेक्स्ट नोड्स

हर सेकंड बदलने वाली स्ट्रिंग्स (जैसे काउंटडाउन टाइमर: "00:01", "00:02") से बचें। इससे अनुवाद इंजन पर हजारों अनोखे अनुरोध आ जाते हैं।

अनुशंसित दृष्टिकोण:

समय: 00:01

मल्टीलिपि के साथ डायनामिक कंटेंट का अनुवाद कैसे करें | मल्टीलिपि हेल्प सेंटर

सुनिश्चित करें कि टेक्स्ट को विशिष्ट टैग्स (

, ,

) में लपेटा गया है, न कि में ढीला तैरता हुआ। यह ऑब्जर्वर को सेगमेंट को अलग करने में मदद करता है।

सर्वोत्तम अभ्यास:

बिना आपके ऐप को तोड़े अनुवाद कैसे करें।

"टाइपिंग" प्रभावों से बचें

स्क्रिप्ट जो कैरेक्टर-दर-कैरेक्टर टेक्स्ट "टाइप" करती हैं (ट... टे... टेक्स... टेक्स्ट) अनुवाद इंजनों को भ्रमित करती हैं। पूरा टेक्स्ट स्ट्रिंग एक साथ रेंडर करें।

कार्यान्वयन सुझाव:

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

एसिंक्रोनस फ़ेचेस

क्रॉस-ऑरिजिन सीमाओं पर एक नोट।

यदि आपकी डायनामिक सामग्री क्लीन HTML रैपिंग (जैसे, एक तृतीय-पक्ष चैट विजेट या भुगतान गेटवे):

समान मूल:

यदि iframe यहाँ होस्ट किया गया है आपका डोमेन, मल्टीलिपि इसका अनुवाद कर सकते हैं.

क्रॉस ओरिजिन:

यदि आईफ़्रेम एक 4. एज केस: आईफ़्रेम बाहरी डोमेन इसका अनुवाद नहीं कर सकते ब्राउज़र सुरक्षा नीतियों (CORS) के कारण।

आपको उस तृतीय-पक्ष टूल के भीतर ही अनुवाद सेटिंग्स को कॉन्फ़िगर करना होगा।

सारांश

आपको React या Angular के लिए विशिष्ट SDKs स्थापित करने की आवश्यकता नहीं है। एक बार MultiLipi स्क्रिप्ट सक्रिय हो जाने पर, यह ब्राउज़र के रेंडरिंग इंजन में स्वतः हुक हो जाता है किसी भी सामग्री का अनुवाद करने के लिएस्थिर या डायनामिक—जो स्क्रीन पर दिखाई देता है।

MultiLipi के साथ डायनामिक सामग्री का अनुवाद कैसे करें