Dokumentacija: Išplėstinis naudojimas

Išplėstinis naudojimas

Lithuanian

Dešinėn į kairę rašomų kalbų tvarkymas

TacoTranslate palengvina dešinėn į kairę (RTL) rašomas kalbas, tokias 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 patikrinti 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 liktų nepakitę, galite naudoti trigubas kvadratines skliaustus. Ši funkcija naudinga išlaikyti originalų vardų, techninių terminų ar bet kokio kito turinio, kurio neturėtų būti verčiama, formatą.

import {Translate} from 'tacotranslate/react';

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

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

Keli TacoTranslate tiekėjai

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

Jūs galite čia sužinoti daugiau apie šaltinių naudojimą.

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

Pakeisti kilmę arba lokalę

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 pusės kliento pusėje, vertimų užkrovimas gali užtrukti keletą akimirkų, priklausomai nuo vartotojo ryšio. Galite rodyti įkėlimo indikatorius, kad pagerintumėte vartotojo patirtį, pateikdami vizualinį atsiliepimą perjungimo metu.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Daugiskaitos formos naudojimas

Norint teisingai tvarkyti daugiskaitą ir rodyti skaičiais pagrįstas etiketes 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)}}
		/>
	);
}

Daugiau kalbų

Norėdami palaikyti kelias kalbas vienu metu 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>
	);
}

Vertimų ID naudojimas

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ų. Paskirdami unikalius ID, užtikrinate, kad kiekviena eilutės versija būtų išversta tiksliai pagal jos konkretų 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 – kaip „Acceder“ ispanų kalba.

Geriausios praktikos