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 हो सकता है और आपके मार्केटिंग पेज के लिए दूसरा।
अधिक सूक्ष्म नियंत्रण के लिए, आप component स्तर पर 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}
/>
);
}उपरोक्त उदाहरण साधारण पाठ के रूप में प्रदर्शित किया जाएगा।