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 आपको स्ट्रिंग्स को अर्थपूर्ण कंटेनरों में विभाजित करने की अनुमति देते हैं। उदाहरण के लिए, आपके पास दस्तावेज़ीकरण के लिए एक origin और आपके मार्केटिंग पृष्ठ के लिए एक अन्य origin हो सकता है।
अधिक सूक्ष्म नियंत्रण के लिए, आप कंपोनेंट स्तर पर origins सेट कर सकते हैं।
इसे प्राप्त करने के लिए, अपने प्रोजेक्ट में कई TacoTranslate प्रदाताओं का उपयोग करने पर विचार करें।
कृपया ध्यान दें कि एक ही स्ट्रिंग को विभिन्न स्रोतों में अलग-अलग अनुवाद मिल सकते हैं।
अंततः, आप strings को origins में कैसे विभाजित करते हैं यह आप और आपकी जरूरतों पर निर्भर करता है। हालांकि, ध्यान रखें कि एक ही origin में बहुत सारी strings होने से लोडिंग समय बढ़ सकता है।
वेरिएबल्स को संभालना
डायनामिक सामग्री के लिए आपको हमेशा वेरिएबल्स का उपयोग करना चाहिए — जैसे उपयोगकर्ता नाम, तिथियाँ, ई‑मेल पते आदि।
स्ट्रिंग्स में वेरिएबल्स को डबल ब्रैकेट्स का उपयोग करके घोषित किया जाता है, जैसे {{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}
/>
);
}ऊपर दिया गया उदाहरण सादा टेक्स्ट के रूप में प्रदर्शित किया जाएगा।