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