Dokumentacija: Išplėstinis naudojimas

Išplėstinis naudojimas

Lithuanian

Darbas su iš dešinės į kairę rašomomis kalbomis

TacoTranslate palengvina iš dešinės į kairę (RTL) rašomų 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ų išsaugoti tokie, kokie yra, galite naudoti trigubas kvadratines skliausteles. Ši funkcija naudinga išlaikyti vardų, techninių terminų ar bet kokio kito turinio, kuris neturėtų būti verčiamas, pradinį 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

Stipriai rekomenduojame savo programoje naudoti kelis TacoTranslate tiekėjus. Tai naudinga, kai reikia suskirstyti vertimus ir eilutes pagal skirtingas kilmes, pavyzdžiui, antraštę, poraštę ar konkrečias skiltis.

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

TacoTranslate teikėjai paveldi 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>
	);
}

Origin arba lokalės perrašymas

Be to, naudojant kelis TacoTranslate teikėjus, 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" />
		</>
	);
}

Krovimo tvarkymas

Pakeitus kalbą kliento pusėje, vertimų gavimas gali užtrukti kelias akimirkas, priklausomai nuo vartotojo ryšio. Perjungimo metu galite rodyti užkrovimo indikatorių, kad pagerintumėte naudotojo patirtį, suteikdami vizualinį grįžtamąjį ryšį.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Daugiskaita

Norint teisingai tvarkyti daugiskaitą ir tinkamai rodyti skaičiaus priklausančias etiketes įvairiomis kalbomis, 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 toje pačioje programoje vienu metu palaikyti kelias kalbas, 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>
	);
}

Vertimo ID naudojimas

Galite pridėti id prie Translate komponento, kad tvarkytumėte skirtingus to paties teksto vertimus arba reikšmes. Tai ypač naudinga, kai tas pats tekstas reikalauja skirtingų vertimų priklausomai nuo konteksto. Priskirdami unikalius ID užtikrinate, kad kiekvienas to paties 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 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