ஆவணம்: மேம்பட்ட பயன்முறை

மேம்பட்ட பயன்பாடு

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>
	);
}

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

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

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

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

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)}}
		/>
	);
}

பல மொழிகள்

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

நீங்கள் 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>
	);
}

மொழிபெயர்ப்பு ID-களை பயன்படுத்துதல்

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

import {Translate} from 'tacotranslate/react';

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

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

உதாரணமாக, தலைப்பு உள்நுழைவு “Iniciar sesión” என்று மொழிபெயர்க்கப்படலாம், மற்றும் அடிப்பகுதி உள்நுழைவு “Acceder” என்று ஸ்பானிஷ் மொழியில் மொழிபெயர்க்கப்படலாம்.

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