डॉक्युमेंटेशन: TacoTranslate चा वापर

TacoTranslate वापरणे

Marathi

स्ट्रिंग्जचे भाषांतर करीत आहे

सध्या स्ट्रिंग्सचे भाषांतर करण्यासाठी तीन मार्ग आहेत: 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 भाषांतर तयार होताच, ते मशीन भाषांतराची जागा घेईल आणि तुम्ही जेव्हा ही स्ट्रिंग्सचे भाषांतर मागाल तेव्हा ते पाठवले जाईल.

जर आपण एखादी स्ट्रिंग manually अनुवादित केली असेल, तर त्या अनुवादांना प्राधान्य दिले जाते आणि तीच परत दिली जाते.

मूळांचा उपयोग करणे

TacoTranslate प्रकल्पांमध्ये अशा गोष्टी असतात ज्याला आपण origins म्हणतो. त्यांना आपल्या स्ट्रिंग्ज आणि भाषांतरांसाठी प्रवेश बिंदू, फोल्डर्स किंवा गट म्हणून विचार करा.

import {TacoTranslate} from 'tacotranslate/react';

function Menu() {
	return (
		<TacoTranslate origin="application-menu">
			// ...
		</TacoTranslate>
	);
}

ऑरिजिन्समुळे तुम्हाला स्ट्रिंग्जना अर्थपूर्ण कंटेनरमध्ये विभाजित करता येतात. उदाहरणार्थ, तुमच्याकडे एक ऑरिजिन दस्तऐवजीकरणासाठी आणि दुसरे तुमच्या मार्केटिंग पृष्ठासाठी असू शकते.

अधिक तपशीलवार नियंत्रणासाठी, आपण कॉम्पोनेंट पातळीवर ओरिजिन सेट करू शकता.

हे साध्य करण्यासाठी, आपल्या प्रकल्पात अनेक 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}
		/>
	);
}

वरील उदाहरण साध्या मजकुराप्रमाणे 렌더 केले जाईल.

सर्व्हर-साईड रेंडरिंग