Dokumentacija: Išplėstinis naudojimas

Išplėstinis naudojimas

Lithuanian

Dešinėn į kairę orientuotų 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ą funkciją isRightToLeftLocaleCode norėdami patikrinti esamą 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ų išsaugoti be pakeitimų, galite naudoti trigubas kvadratines skliaustelius. Ši funkcija naudinga išlaikyti originalų vardų, techninių terminų ar bet kokio kito turinio formatavimą, kurio nereikėtų versti.

import {Translate} from 'tacotranslate/react';

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

Šiame pavyzdyje žodis „TacoTranslate“ vertime liks nepakeistas.

Keli TacoTranslate paslaugų teikėjai

Mes labai rekomenduojame naudoti kelis TacoTranslate tiekėjus savo programoje. Tai naudinga organizuojant jūsų vertimus ir tekstus į skirtingus šaltinius, pavyzdžiui, antraštę, poraštę ar konkrečias skiltis.

Jūs galite skaityti daugiau apie šaltinių naudojimą čia.

TacoTranslate teikėjai paveldi nustatymus iš bet kurio tėvinio teikėjo, todėl jums nereikės kartoti 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>
	);
}

Origino arba lokalės perrašymas

Be kelių TacoTranslate teikėjų naudojimo, taip pat galite perrašyti tiek originą, tiek lokalę 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" />
		</>
	);
}

Įkėlimo valdymas

Kalbai keičiantis 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ą perjungimo metu.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Dauginimas

Norint taisyklingai apdoroti daugiskaitą ir teisingai rodyti skaičių pagrįstus ženklus skirtingomis kalbomis, 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)}}
		/>
	);
}

Keli kalbos

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

Taip pat galite perrašyti locale komponentų 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>
	);
}

Naudojant vertimo ID

Jūs galite pridėti id prie Translate komponento, kad tvarkytumėte skirtingus tos pačios eilutės vertimus ar reikšmes. Tai ypač naudinga, kai tas pats tekstas pagal kontekstą reikalauja skirtingų vertimų. Priskirdami unikalius ID, užtikrinate, kad kiekvienas eilutės atvejis būtų tiksliai išverstas pagal jo specifinę 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 prisijungimas gali būti išverstas kaip „Iniciar sesión“, o poraštės prisijungimas gali būti išverstas kaip „Acceder“ ispanų kalba.

Geriausios praktikos