Dokumentacija: Išplėstinis naudojimas

Išplėstinis naudojimas

Lithuanian

Iš dešinės į kairę rašomų kalbų tvarkymas

TacoTranslate palengvina dešinės į kairę (RTL) kalbų, tokių kaip arabų ir hebrajų, palaikymą jūsų React programose. Tinkamas RTL kalbų tvarkymas užtikrina, kad jūsų turinys būtų teisingai rodomas vartotojams, kurie skaito iš dešinės į kairę.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Taip pat galite naudoti pateiktą isRightToLeftLocaleCode funkciją, kad patikrintumėte dabartinę kalbą už React ribų.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Vertimo išjungimas

Norėdami išjungti vertimą tam tikroms eilutės dalims arba užtikrinti, kad tam tikri segmentai būtų palikti nepakitę, galite naudoti trigubas kvadratines skliausteles. Ši funkcija naudinga, kai norite išlaikyti vardų, techninių terminų ar bet kokio kito turinio, kuris neturėtų būti verčiamas, originalų formatą.

import {Translate} from 'tacotranslate/react';

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

Šiame pavyzdyje žodis “TacoTranslate” liks nepakitęs vertime.

Keli TacoTranslate teikėjai

Mes labai rekomenduojame naudoti kelis TacoTranslate teikėjus jūsų programoje. Tai naudinga organizuojant vertimus ir eilutes į skirtingus šaltinius, pavyzdžiui, jūsų antraštei, poraštei ar konkrečioms skiltims.

Galite čia sužinoti daugiau apie originų naudojimą.

TacoTranslate teikėjai perima nustatymus iš bet kurio tėvinio teikėjo, todėl jums nereikės kartoti jokių kitų nustatymų.

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

Šaltinio arba lokalės perrašymas

Be kelių TacoTranslate teikėjų naudojimo, taip pat galite perrašyti tiek origin, tiek locale Translate komponento ir useTranslation hook lygiuose.

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

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

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

Krovimo valdymas

Keičiant kalbą kliento pusėje, vertimų užkrovimas gali užtrukti kelias akimirkas, priklausomai nuo vartotojo ryšio. Galite rodyti įkėlimo indikatorių, kad pagerintumėte vartotojo patirtį, suteikdami vizualinį atsiliepimą kalbos keitimo metu.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Daugiskaita

Siekiant tinkamai spręsti daugiskaitos formas ir teisingai rodyti skaičiui pritaikytas etiketes skirtingose kalbose, tai laikoma geriausia praktika:

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

Kelios kalbos

Norėdami vienu metu palaikyti kelias kalbas toje pačioje programoje, galite naudoti kelis TacoTranslate teikėjus su skirtingomis locale reikšmėmis, kaip parodyta žemiau:

Taip pat galite perrašyti locale komponento arba hook lygmenyje.

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

Vertimų ID naudojimas

Galite pridėti id prie Translate komponento, kad būtų galima tvarkyti skirtingus to paties teksto vertimus arba reikšmes. Tai ypač naudinga, kai tas pats tekstas pagal kontekstą reikalauja skirtingų vertimų. Priskirdami unikalius ID užtikrinate, kad kiekvienas teksto atvejis būtų išverstas tiksliai pagal jo konkrečią reikšmę.

import {Translate} from 'tacotranslate/react';

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

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

Pavyzdžiui, antraštės prisijungimo tekstas gali būti išverstas kaip „Iniciar sesión“, o poraštės prisijungimo tekstas gali būti išverstas kaip „Acceder“ ispanų kalba.

Geriausios praktikos