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 में अलग-अल्ले अनुवाद मिल सकते हैं।
अंततः, आप स्ट्रिंग्स को ऑरिजिन्स में कैसे विभाजित करते हैं यह आप और आपकी आवश्यकताओं पर निर्भर करता है। हालांकि, ध्यान दें कि एक ऑरिजिन में बहुत सारी स्ट्रिंग्स होने से लोडिंग समय बढ़ सकता है।
चरों को संभालना
आपको हमेशा गतिशील सामग्री के लिए वेरिएबल्स का उपयोग करना चाहिए, जैसे कि उपयोगकर्ता नाम, तिथि, ई-मेल पते, और अधिक।
स्ट्रिंग्स में वेरिएबल्स को डबल ब्रैकेट्स का उपयोग करके घोषित किया जाता है, जैसे {{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}
/>
);
}उपरोक्त उदाहरण सादा पाठ के रूप में प्रदर्शित किया जाएगा।