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