Dokumentacija: Išplėstinis naudojimas

Išplėstinis naudojimas

Lithuanian

Kalbų, rašomų iš dešinės į kairę, tvarkymas

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ų rodomas teisingai 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ą, norėdami patikrinti esamą kalbą ne React aplinkoje.

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 išsaugoti vardų, techninių terminų ar bet kokio kito turinio, kurio neturėtų būti verčiama, pradinę formą.

import {Translate} from 'tacotranslate/react';

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

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

Keli TacoTranslate teikėjai

Primygtinai rekomenduojame savo programoje naudoti kelis TacoTranslate teikėjus. Tai padeda suskirstyti jūsų vertimus ir eilutes į skirtingas kilmes, pavyzdžiui, antraštę, poraštę ar konkrečias skiltis.

Galite skaityti daugiau apie originų 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>
	);
}

Kilmės 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'o 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

Keičiant kalbą kliento pusėje, vertimų įkrovimas gali užtrukti kelias akimirkas, priklausomai nuo vartotojo ryšio. Galite rodyti įkrovimo indikatorių, kad pagerintumėte vartotojo patirtį ir suteiktumėte vizualinį grįžtamąjį ryšį perjungimo metu.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Daugiskaita

Norint tinkamai valdyti daugiskaitą ir teisingai rodyti skaičiumi 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)}}
		/>
	);
}

Kelios kalbos

Norėdami tuo pačiu 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'o 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

Galite pridėti id prie Translate komponento, kad būtų galima valdyti skirtingus tos pačios eilutės vertimus arba reikšmes. Tai ypač naudinga, kai tas pats tekstas konteksto atžvilgiu reikalauja skirtingų vertimų. Priskirdami unikalius ID užtikrinate, kad kiekvienas tos eilutės 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ėje esantis prisijungimo tekstas gali būti išverstas kaip “Iniciar sesión”, o poraštėje esantis prisijungimo tekstas — kaip “Acceder” į ispanų kalbą.

Geriausios praktikos