Փաստաթղթավորում: Առաջադեմ օգտագործում

Ընդլայնված օգտագործում

Armenian

Աջից ձախ ուղղությամբ գրվող լեզուների կառավարում

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';
	// ...
}

Թարգմանության անջատում

Եթե ցանկանում եք անջատել թարգմանումը տողի որոշ մասերի համար կամ ապահովել, որ որոշ հատվածներ պահպանվեն առանց փոփոխության, կարող եք օգտագործել եռակի քառակուսի փակագծեր։ Այս ֆունկցիան օգտակար է անունների, տեխնիկական տերմինների կամ ցանկացած այլ բովանդակության բնօրինակ ձևաչափը պահպանելու համար, որը չպետք է թարգմանվի։

import {Translate} from 'tacotranslate/react';

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

Այս օրինակով, բառը “TacoTranslate” կմնա անփոփոխ թարգմանության մեջ.

Մի քանի TacoTranslate մատակարարներ

Մենք խիստ խորհուրդ ենք տալիս ձեր հավելվածում օգտագործել մի քանի TacoTranslate մատակարարներ։ Սա օգտակար է՝ ձեր թարգմանությունները և տեքստային տողերը կազմակերպելու համար ըստ տարբեր սկզբնաղբյուրների՝ օրինակ՝ վերնագրի, էջի ստորին հատվածի կամ հատուկ բաժինների։

Կարող եք այստեղ ավելի մանրամասն տեղեկանալ origins-ների օգտագործման մասին։

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 պրովայդերների օգտագործումից, դուք նաև կարող եք վերագրել ինչպես origin-ը, այնպես էլ locale-ը Translate կոմպոնենտի և useTranslation hook-ի մակարդակներում։

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

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

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

Բեռնումների կառավարում

Երբ հաճախորդի կողմում փոխում եք լեզուն, թարգմանությունների բեռնումը կարող է որոշ ժամանակ տևել՝ կախված օգտվողի կապից։ Ձեր UI-ում կարող եք ցուցադրել բեռնման ցուցիչ՝ փոխման ընթացքում օգտվողին տեսողական հետադարձ կապ ապահովելու համար։

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Բազմացում

Տարբեր լեզուներում բազմացման (pluralization)-ը ճիշտ կառավարելու և թվով հիմնված պիտակները ճիշտ ցուցադրելու համար սա համարվում է լավագույն պրակտիկան։

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ը կոմպոնենտի կամ hook-ի մակարդակում։

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-ների օգտագործում

Դուք կարող եք id Translate կոմպոնենտին ավելացնել՝ նույն տողը տարբեր թարգմանություններ կամ նշանակություններ ունենալու համար։ Սա հատկապես օգտակար է, երբ նույն տեքստը, կոնտեքստից կախված, պահանջում է տարբեր թարգմանություններ։ Եզակի ID-ներ նշանակելով՝ դուք երաշխավորում եք, որ տողի յուրաքանչյուր օրինակն ճիշտորեն թարգմանվի նրա հատուկ նշանակությանը համապատասխան։

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» իսպաներենում։

Լավագույն պրակտիկաներ