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