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