🈺 🍋 🎽 साइट के लिए कस्टम googleTranslate विजेट 🕤 ♣️ 👌

इस लेख को लिखना शुरू करने से पहले, मैंने उस पृष्ठ पर जाने का निर्णय लिया, जहाँ संभावित परिवर्तनों के बारे में जानने के लिए Google अनुवाद विजेट तैयार है और इस संदेश को देखा:

अब आप साइट अनुवादक तक नहीं पहुँच सकते। यह उन लोगों को प्रभावित नहीं करेगा जो पहले से संबंधित प्लगइन स्थापित कर चुके हैं।

हम उन उपयोगकर्ताओं को वेब पेजों का अनुवाद करने के लिए प्रोत्साहित करते हैं जिनके पास एक अंतर्निहित अनुवाद फ़ंक्शन है।

यह अनुमान लगाना कठिन नहीं है कि Google किस ब्राउज़र का अर्थ है, लेकिन यह बात नहीं है। सबसे महत्वपूर्ण बात, प्लगइन अभी भी काम कर रहा है और हम इसका उपयोग कर सकते हैं। इसके अलावा, एक विजेट उत्पन्न करने की क्षमता की कमी के कारण, यह विषय और भी अधिक प्रासंगिक हो जाता है, क्योंकि मशीन अनुवाद की आवश्यकता गायब नहीं हुई है, और मेरी राय में, Google अनुवाद इसके लिए सबसे शक्तिशाली उपकरणों में से एक है।

हमारा उदाहरण क्या दिखेगा:

डेमो पेज लेआउट

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>  googleTranslate  </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script src="js/google-translate.js"></script> <script src="//translate.google.com/translate_a/element.js?cb=TranslateInit"></script> </head> <body class="page page_fix"> <div class="language"> <img src="images/lang/lang__ru.png" alt="ru" data-google-lang="ru" class="language__img"> <img src="images/lang/lang__en.png" alt="en" data-google-lang="en" class="language__img"> <img src="images/lang/lang__de.png" alt="de" data-google-lang="de" class="language__img"> <img src="images/lang/lang__fr.png" alt="fr" data-google-lang="fr" class="language__img"> <img src="images/lang/lang__pt.png" alt="pt" data-google-lang="pt" class="language__img"> </div> <section class="content"> <h1 class="content__title">  </h1> <div class="content__desc"> <p>       Google Translate Widget</p> <p>  </p> <p>Hello !!!</p> </div> </section> </body> </html>

हमारे कस्टम विजेट के सही संचालन के लिए, आपको फ़ाइलों को जोड़ना होगा:

 <link rel="stylesheet" href="css/style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script src="js/google-translate.js"></script> <script src="//translate.google.com/translate_a/element.js?cb=TranslateInit"></script>

Style.css की सामग्री:

 body { margin: 0; padding: 0; } .page { display: flex; min-height: 100vh; } /*   body,    */ .page_fix { top: 0 !important; position: static !important; } /*    */ .skiptranslate { display: none !important; } /* language */ .language { position: fixed; left: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; } .language__img { margin: 2px; cursor: pointer; opacity: .5; } .language__img:hover, .language__img_active { opacity: 1; } /* content */ .content { text-align: center; margin: auto; }

प्रयुक्त झंडे:

कस्टम विजेट लेआउट:

 <div class="language"> <img src="images/lang/lang__ru.png" alt="ru" data-google-lang="ru" class="language__img"> <img src="images/lang/lang__en.png" alt="en" data-google-lang="en" class="language__img"> <img src="images/lang/lang__de.png" alt="de" data-google-lang="de" class="language__img"> <img src="images/lang/lang__fr.png" alt="fr" data-google-lang="fr" class="language__img"> <img src="images/lang/lang__pt.png" alt="pt" data-google-lang="pt" class="language__img"> </div>

सामग्री Google-Translate.js :

 const googleTranslateConfig = { lang: "ru", }; function TranslateInit() { let code = TranslateGetCode(); //              $('[data-google-lang="' + code + '"]').addClass('language__img_active'); if (code == googleTranslateConfig.lang) { //    ,       //    TranslateClearCookie(); } //       new google.translate.TranslateElement({ pageLanguage: googleTranslateConfig.lang, }); //      $('[data-google-lang]').click(function () { TranslateSetCookie($(this).attr("data-google-lang")) //   window.location.reload(); }); } function TranslateGetCode() { //   ,     let lang = ($.cookie('googtrans') != undefined && $.cookie('googtrans') != "null") ? $.cookie('googtrans') : googleTranslateConfig.lang; return lang.substr(-2); } function TranslateClearCookie() { $.cookie('googtrans', null); $.cookie("googtrans", null, { domain: "." + document.domain, }); } function TranslateSetCookie(code) { //   /__/___ $.cookie('googtrans', "/auto/" + code); $.cookie("googtrans", "/auto/" + code, { domain: "." + document.domain, }); }

भाषा बदलते समय, googtrans कुंजी के साथ कुकीज़ और फॉर्म / आरयू / एन का एक मूल्य जोड़ा जाता है

/ आरयू वह भाषा है जिसका हम अनुवाद करते हैं
/ en वह भाषा है जिसमें हम अनुवाद करते हैं

यह मानक व्यवहार है, इसलिए मैंने विजेट को अनुकूलित करने के लिए इसका उपयोग किया। आवश्यक भाषाओं के झंडे पर क्लिक करके, प्रपत्र / ऑटो / select_language के संबंधित मूल्य को कुकी से डेटा-गूगल-लैंग विशेषता से लिखा जाता है। तब एक रिबूट होता है और ऑटो को अलग से एक भाषा के साथ बदल दिया जाता है जो कि विन्यास में होता है:

 const googleTranslateConfig = { lang: "ru", };

ऐसा इसलिए किया जाता है ताकि हम एक भाषा से जुड़ न जाएं। यदि उदाहरण के लिए साइट को 2 भाषाओं, रूसी और अंग्रेजी में अनुवादित किया गया है, तो हम वर्तमान भाषा को कॉन्फ़िगरेशन में स्थानांतरित कर सकते हैं और इसे सही ढंग से संसाधित कर सकते हैं। सभी उपलब्ध भाषाएं और उनके ISO-639-1 कोड यहां देखे जा सकते हैं ।

मैंने कुकीज़ को अलग से जोड़ने और साफ करने के कार्यों को जोड़ा, ताकि मैं अतिरिक्त जांच कर सकूं और उन्हें अन्य स्थानों पर बुला सकूं। एक महत्वपूर्ण बिंदु, मुख्य डोमेन और सभी उप डोमेन के लिए कुकीज़ को बदला जाना चाहिए।

अब, हमारे विजेट पर नियंत्रण होने से हम आसानी से और अधिक जटिल डिजाइनों को लागू कर सकते हैं:

GitHub पर एक परियोजना के साथ भंडार

साइट के लिए कस्टम googleTranslate विजेट

More articles: