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