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