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 अनुवाद तैयार हो जाएगा, यह मशीन अनुवाद की जगह ले लेगा और जब भी आप अपने स्ट्रिंग्स के अनुवाद का अनुरोध करेंगे, तो उसे भेज दिया जाएगा।
यदि आपने किसी स्ट्रिंग का मैन्युअल रूप से अनुवाद किया है, तो उन अनुवादों को प्राथमिकता दी जाएगी और वे लौटाए जाएंगे।
उत्पत्तियों का उपयोग
TacoTranslate परियोजनाओं में वे चीज़ें होती हैं जिन्हें हम origins कहते हैं। इन्हें अपने स्ट्रिंग्स और अनुवादों के लिए प्रवेश बिंदु, फ़ोल्डर, या समूह समझें।
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}Origins आपको स्ट्रिंग्स को अर्थपूर्ण कंटेनरों में अलग करने देते हैं। उदाहरण के लिए, आपके पास दस्तावेज़ीकरण के लिए एक ओरिजिन और मार्केटिंग पृष्ठ के लिए एक अन्य ओरिजिन हो सकता है।
अधिक सूक्ष्म नियंत्रण के लिए, आप कंपोनेंट-स्तर पर origins सेट कर सकते हैं।
इसे प्राप्त करने के लिए, अपने प्रोजेक्ट में एकाधिक TacoTranslate प्रदाताओं का उपयोग करने पर विचार करें.
कृपया ध्यान दें कि एक ही स्ट्रिंग को अलग‑अलग origins में अलग अनुवाद मिल सकते हैं।
अंततः, आप स्ट्रिंग्स को ऑरिजिन्स में कैसे विभाजित करते हैं यह आप और आपकी आवश्यकताओं पर निर्भर करता है। हालाँकि, ध्यान दें कि एक ही ऑरिजिन में बहुत सारी स्ट्रिंग्स होने पर लोडिंग समय बढ़ सकता है।
वेरिएबल्स को संभालना
आपको हमेशा डायनेमिक सामग्री के लिए वेरिएबल्स का उपयोग करना चाहिए, जैसे कि उपयोगकर्ता नाम, तिथियाँ, ई‑मेल पते और अन्य।
स्ट्रिंग्स में वेरिएबल्स डबल ब्रैकेट्स का उपयोग करके घोषित किए जाते हैं, जैसे {{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}
/>
);
}ऊपर दिया गया उदाहरण सादे पाठ के रूप में प्रदर्शित किया जाएगा।