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