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}
/>
);
}उपरोक्त उदाहरण को सादा पाठ के रूप में प्रदर्शित किया जाएगा।