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

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

Armenian

Աջից դեպի ձախ (RTL) լեզուների մշակումը

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

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

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