ஆவணக்குறிப்பு: முன்னேற்றப்பட்ட பயன்பாடு

முன்னேற்றமடைந்த பயன்பாடு

Tamil

இடமிருந்து வலப்பக்கத்துக்கான மொழிகளை கையாளல்

TacoTranslate உங்கள் React பயன்பாடுகளில் அரேபிக் மற்றும் ஹீப்ரு போன்ற வலது முதல் இடது (RTL) மொழிகளை ஆதரிப்பதை எளிதாக்குகிறது. RTL மொழிகளை சரியான முறையில் கையாளுதல், வலது முதல் இடது வாசிக்கும் பயனர்களுக்கு உங்கள் உள்ளடக்கம் சரியாக காட்சிபடுத்தப்படுவதை உறுதி செய்கிறது.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

நீங்கள் வழங்கப்பட்ட isRightToLeftLocaleCode செயல்பாட்டைப் பயன்படுத்தி தற்போதைய மொழியை React வெளியேச் சரிபார்க்கலாம்.

import {isRightToLeftLocaleCode} from 'tacotranslate';

function foo(locale = 'es') {
	const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
	// ...
}

மொழிபெயர்ப்பை முடக்குதல்

ஒரு string இன் குறிப்பிட்ட பகுதிகளுக்கான மொழிபெயர்ப்பை முடக்க அல்லது குறிப்பிட்ட பகுதியில் உள்ள உள்ளடக்கம் அப்படியே இருப்பதை உறுதி செய்ய, நீங்கள் மூன்று கோட்களுடன் கூடிய அடுக்குமட்டைகளை triple square brackets பயன்படுத்தலாம். பெயர்கள், தொழில்நுட்ப 용ைகள், அல்லது எந்தவொரு பிற உள்ளடக்கமும் மொழிபெயர்க்கப்பட கூடாதவற்றின் முந்தைய வடிவத்தை பராமரிக்க இந்த அம்சம் பயனுள்ளது.

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

இந்த எடுத்துக்காட்டில், “TacoTranslate” என்ற வார்த்தை மொழிபெயர்ப்பில் மாற்றமடையாது.

பல TacoTranslate வழங்குநர்கள்

உங்கள் செயலியில் பல TacoTranslate வழங்குநர்களைப் பயன்படுத்தத் தேர்மைப்படுத்துகிறோம். இது உங்கள் மொழிபெயர்ப்புகள் மற்றும் சங்கிலிகளை தலைப்பழுத்து, அடிப்பகுதி அல்லது குறிப்பிட்ட பிரிவுகள் போன்ற வேறுவிதமான மூலங்களாக ஒழுங்குபடுத்த உதவுகிறது.

நீங்கள் இங்கிருந்து மூலங்களை பயன்படுத்துவது பற்றி மேலும் படிக்கலாம்.

TacoTranslate வழங்குநர்கள் எந்த மூத்த வழங்குநரிடம் இருந்தாலும் அமைப்புகளைப் பெறுகிறார்கள், ஆகவே நீங்கள் மற்ற எந்த அமைப்புகளையும் மீண்டும் கொடுக்க வேண்டியதில்லை.

import createTacoTranslateClient from 'tacotranslate';
import {TacoTranslate} from 'tacotranslate/react';

const tacoTranslateClient = createTacoTranslateClient({apiKey: 'YOUR_API_KEY'});

function Header() {
	return (
		<TacoTranslate origin="header">
			// ...
		</TacoTranslate>
	);
}

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

export default function App() {
	return (
		<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
			<Header />
			<Menu />
		</TacoTranslate>
	);
}

மூலத்தையும் அல்லது உள்ளாழ்வையும் மீறல்

பல TacoTranslate வழங்குநர்களை பயன்படுத்துவதில் மேலும, நீங்கள் Translate கூறு மற்றும் useTranslation ஹூக் நிலைகளில் தோற்றம் மற்றும் இடத்தை இரண்டும் மீற முடியும்.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

ஏற்றுமதி கையாளல்

வாடிக்கையாளர் பக்கத்தில் மொழிகளை மாற்றும்போது, பயனர் இணைப்பின் அடிப்படையில் மொழிபெயர்ப்புகளை பெற சில கணங்கள் எடுக்கும். மாற்றத்தின் போது பார்வை மூலம் பதிலளிப்பை வழங்குவதன் மூலம் பயனர் அனுபவத்தை மேம்படுத்த நீங்கள் ஒரு ஏற்றுதல் குறியீட்டை காட்டலாம்.

import {useTacoTranslate} from 'tacotranslate/react';

function Component() {
	const {isLoading} = useTacoTranslate();

	return (
		isLoading ? 'Translations are loading...' : null
	);
}

பன்மை கூறுதல்

பலரசீகம் மற்றும் எண்ணிக்கை அடிப்படையிலான லேபிள்களை சரியாக காட்சிப்படுத்த, இது சிறந்த நடைமுறை என்று கருதப்படுகிறது:

import {Translate, useLocale} from 'tacotranslate/react';

function PhotoCount() {
	const locale = useLocale();
	const count = 1;

	return count === 0 ? (
		<Translate string="You have no photos." />
	) : count === 1 ? (
		<Translate string="You have 1 photo." />
	) : (
		<Translate
			string="You have {{count}} photos."
			variables={{count: count.toLocaleString(locale)}}
		/>
	);
}

பல மொழிகள்

ஒரே செயலியில் பல மொழிகளை ஒரே நேரத்திலேயே ஆதரிக்க, நீங்கள் பல TacoTranslate வழங்குநர்களை பயன்படுத்த வெவ்வேறு locale மதிப்புகளுடன் கீழே காட்டப்படுவது போல் செய்யலாம்:

நீங்கள் locale ஐ காம்பொனென்ட் அல்லது ஹுக் நிலைத்தில் மீடமைக்கவும் முடியும்.

import createTacoTranslateClient from 'tacotranslate';
import {TacoTranslate, Translate} from 'tacotranslate/react';

const tacoTranslateClient = createTacoTranslateClient({apiKey: 'YOUR_API_KEY'});

function Spanish() {
	return (
		<TacoTranslate locale="es">
			<Translate string="Hello, world in Spanish!" />
		</TacoTranslate>
	);
}

function Norwegian() {
	return (
		<TacoTranslate locale="no">
			<Translate string="Hello, world in Norwegian!" />
		</TacoTranslate>
	);
}

export default function App() {
	return (
		<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
			<Spanish />
			<Norwegian />
		</TacoTranslate>
	);
}

மொழிபெயர் ஐடிய்கள் பயன்படுத்தல்

நீங்கள் Translate கூறில் id ஒன்றை சேர்க்கலாம், அதன்மூலம் ஒரே சரத்தில் பல்வேறு மொழிபெயர்ப்புகள் அல்லது அர்த்தங்களை நிர்வகிக்க முடியும். ஒரே எழுத்து வேறு வேறு பொருள் அடிப்படையில் மொழிபெயர்க்க வேண்டிய போது இது மிகவும் பயனுள்ளது. தனித்துவமான ID-களை ஒதுக்குவதன் மூலம், அந்த சரத்தின் ஒவ்வொரு நிகழ்வும் அதன் குறிப்பிட்ட அர்த்தத்திற்கு தகுந்தவாறு துல்லியமாக மொழிபெயர்க்கப்படுவதை நீங்கள் உறுதி செய்யலாம்.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

உதாரணமாக, header login என்பதை ஸ்பானிஷிலே “Iniciar sesión” என்று மற்றும் footer login என்பதை “Acceder” என்று மாற்றலாம்.

சிறந்த நடைமுறைகள்