Dokumentacija: Išplėstinis naudojimas

Išplėstinis naudojimas

Lithuanian

Dešinės į kairę rašančių 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, kad patikrintumėte 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 nepakitę, galite naudoti trikampius kvadratinius skliaustus ( ). Ši funkcija yra naudinga išlaikant originalų vardų, techninių terminų arba bet kokio kito turinio, kuris neturėtų būti verčiamas, formatą.

import {Translate} from 'tacotranslate/react';

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

Šiame pavyzdyje žodis „TacoTranslate“ išliks nepakitęs vertime.

Keli TacoTranslate teikėjai

Mes nuoširdžiai skatiname naudoti kelis TacoTranslate tiekėjus jūsų programoje. Tai naudinga organizuojant vertimus ir tekstus į skirtingas kilmes, tokias kaip jūsų antraštė, poraštė ar konkrečios skiltys.

Jūs galite skaityti daugiau apie kilmės panaudojimą čia.

TacoTranslate tiekėjai paveldi nustatymus iš bet kurio tėvinio tiekė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>
	);
}

Nepaisyti kilmės arba lokalės

Be kelių TacoTranslate tiekė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" />
		</>
	);
}

Krovimo valdymas

Keičiant kalbas kliento pusėje, vertimų gavimas gali užtrukti kelias akimirkas, priklausomai nuo vartotojo ryšio. Galite rodyti įkėlimo indikatorių, kad pagerintumėte naudotojo patirtį pateikdami vizualinį grįžtamąjį ryšį per kalbų keitimą.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Dauginimas

Kad būtų teisingai tvarkomas daugiskaitos vartojimas ir rodoma pagal skaičių pagrįsta ženklinimas skirtingomis 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)}}
		/>
	);
}

Keli kalbos

Kad vienu metu palaikytumėte kelias kalbas toje pačioje programoje, galite naudoti kelis TacoTranslate tiekė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>
	);
}

Naudojant vertimo ID

Jūs galite pridėti id prie Translate komponento, kad apdorotumėte skirtingus tos pačios eilutės vertimus ar reikšmes. Tai ypač naudinga, kai tas pats tekstas konteksto atžvilgiu reikalauja skirtingų vertimų. Priskirdami unikalius ID, užtikrinate, kad kiekviena eilutės versija būtų tiksliai išversta pagal jos 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