TacoTranslate का उपयोग
स्ट्रिंग्स का अनुवाद
वर्तमान में स्ट्रिंग्स का अनुवाद करने के तीन तरीके हैं: Translate कंपोनेंट, useTranslation हुक, या translateEntries यूटिलिटी।
Translate कंपोनेंट का उपयोग करना।
अनुवाद span एलिमेंट के भीतर प्रदर्शित करता है, और HTML रेंडरिंग का समर्थन करता है।
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}आप उदाहरण के लिए कम्पोनेंट पर as="p" का उपयोग करके तत्व का प्रकार बदल सकते हैं।
useTranslation हुक का उपयोग।
अनुवादों को एक सादा स्ट्रिंग के रूप में लौटाता है। उदाहरण के लिए, meta टैग्स में उपयोगी।
import {useEffect} from 'react';
import {useTranslation} from 'tacotranslate/react';
function Page() {
const helloWorld = useTranslation('Hello, world!');
useEffect(() => {
alert(helloWorld);
}, [helloWorld]);
return (
<title>{useTranslation('My page title')}</title>
);
}translateEntries यूटिलिटी का उपयोग।
स्ट्रिंग्स को सर्वर-साइड पर अनुवाद करें। अपने OpenGraph छवियों को सुपरचार्ज करें।
import {createEntry, translateEntries} from 'tacotranslate';
async function generateMetadata(locale = 'es') {
const title = createEntry({string: 'Hello, world!'});
const description = createEntry({string: 'TacoTranslate on the server'});
const translations = await translateEntries(
tacoTranslate,
{origin: 'opengraph', locale},
[title, description]
);
return {
title: translations(title),
description: translations(description)
};
}स्ट्रिंग्स का अनुवाद कैसे किया जाता है
जब स्ट्रिंग्स हमारे सर्वरों तक पहुँचती हैं, तो हम पहले उन्हें मान्य करते और सहेजते हैं, फिर तुरंत एक मशीन अनुवाद लौटाते हैं। जबकि मशीन अनुवाद सामान्यतः हमारे AI अनुवादों की तुलना में गुणवत्ता में कम होते हैं, वे एक त्वरित प्रारंभिक प्रतिक्रिया प्रदान करते हैं।
साथ ही, हम आपकी स्ट्रिंग के लिए उच्च-गुणवत्ता, अत्याधुनिक AI अनुवाद उत्पन्न करने हेतु एक असिंक्रोनस अनुवाद कार्य आरंभ करते हैं। एक बार जब AI अनुवाद तैयार हो जाएगा, यह मशीन अनुवाद की जगह ले लेगा और जब भी आप अपने स्ट्रिंग्स के अनुवाद का अनुरोध करेंगे, यह भेज दिया जाएगा।
यदि आपने किसी स्ट्रिंग के मैन्युअल अनुवाद किए हैं, तो वे अनुवाद प्राथमिकता लेंगे और लौटाए जाएंगे।
Origins का उपयोग
TacoTranslate परियोजनाओं में वे चीज़ें शामिल होती हैं जिन्हें हम ऑरिजिन्स कहते हैं। इन्हें अपनी स्ट्रिंग्स और अनुवादों के लिए एंट्री-पॉइंट्स, फ़ोल्डर्स, या समूहों के रूप में सोचें।
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}Origins आपको स्ट्रिंग्स को अर्थपूर्ण कंटेनरों में अलग करने की अनुमति देते हैं। उदाहरण के लिए, आप दस्तावेज़ीकरण के लिए एक origin और अपने मार्केटिंग पृष्ठ के लिए दूसरा रख सकते हैं।
और अधिक सूक्ष्म नियंत्रण के लिए, आप कंपोनेंट स्तर पर origins सेट कर सकते हैं।
इसे प्राप्त करने के लिए, अपने प्रोजेक्ट में कई TacoTranslate प्रदाताओं का उपयोग पर विचार करें।
कृपया ध्यान दें कि एक ही स्ट्रिंग को विभिन्न ओरिजिन्स में अलग-अलग अनुवाद मिल सकते हैं।
अंततः, आप स्ट्रिंग्स को origins में कैसे अलग करते हैं यह आप और आपकी ज़रूरतों पर निर्भर करेगा। हालांकि, ध्यान रखें कि एक ही origin में बहुत सारी स्ट्रिंग्स होने पर लोडिंग समय बढ़ सकता है।
वेरिएबल्स को संभालना
आपको हमेशा गतिशील सामग्री के लिए वेरिएबल्स का उपयोग करना चाहिए, जैसे उपयोगकर्ता नाम, तिथियाँ, ईमेल पते और अधिक।
स्ट्रिंग्स में वेरिएबल्स को डबल ब्रैकेट्स का उपयोग करके परिभाषित किया जाता है, जैसे {{variable}}.
import {Translate} from 'tacotranslate/react';
function Greeting() {
const name = 'Juan';
return <Translate string="Hello, {{name}}!" variables={{name}} />;
}import {useTranslation} from 'tacotranslate/react';
function useGreeting() {
const name = 'Juan';
return useTranslation('Hello, {{name}}!', {variables: {name}});
}HTML सामग्री का प्रबंधन
डिफ़ॉल्ट रूप से, Translate कंपोनेंट HTML सामग्री का समर्थन करता है और उसे रेंडर करता है। हालाँकि, आप इस व्यवहार से बाहर आ सकते हैं useDangerouslySetInnerHTML को false सेट करके।
जब आप अविश्वसनीय सामग्री, जैसे उपयोगकर्ता-जनित सामग्री का अनुवाद कर रहे हों, तो HTML रेंडरिंग को अक्षम करना दृढ़ता से अनुशंसित है।
सभी आउटपुट को रेंडर किए जाने से पहले हमेशा sanitize-html के साथ सैनिटाइज़ किया जाता है।
import {Translate} from 'tacotranslate/react';
function Page() {
return (
<Translate
string={`
Welcome to <strong>my</strong> website.
I’m using <a href="{{url}}">TacoTranslate</a> to translate text.
`}
variables={{url: 'https://tacotranslate.com'}}
useDangerouslySetInnerHTML={false}
/>
);
}उपरोक्त उदाहरण सादा पाठ के रूप में प्रदर्शित किया जाएगा।