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

Առաջադեմ օգտագործում

Armenian

Աջից ձախ լեզուների կառավարում

TacoTranslate-ը հեշտացնում է աջից ձախ (RTL) ուղղությամբ գրող լեզուների, օրինակ՝ արաբերենի և եբրայերենի, աջակցումը ձեր React հավելվածներում։ Պատշաճ կերպով մշակված 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 պրովայդեր։ Սա օգտակար է ձեր թարգմանությունները և տեքստերը կազմակերպելու համար՝ ըստ տարբեր աղբյուրների, ինչպիսիք են վերին հատվածը, ստորին հատվածը կամ կոնկրետ բաժինները։

Դուք կարող եք այստեղ ավելին կարդալ՝ ինչպես օգտագործել աղբյուրները։

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

Օրիգինի կամ locale-ի գերակշռում

Բացի մի քանի 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" />
		</>
	);
}

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

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

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

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