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