Dokumentacija: Išplėstinis naudojimas

Išplėstinis naudojimas

Lithuanian

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

TacoTranslate palengvina dešiniojo į 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

Norint išjungti vertimą tam tikroms eilutės dalims arba užtikrinti, kad tam tikri segmentai liktų nepakeisti, galite naudoti triple kvadratines skliausteles. Ši funkcija yra naudinga išlaikant originalų vardų, techninių terminų ar bet kokio kito turinio formatą, kuris neturėtų būti verčiamas.

import {Translate} from 'tacotranslate/react';

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

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

Keli TacoTranslate tiekėjai

Mes tvirtai rekomenduojame naudoti kelis TacoTranslate tiekėjus jūsų programėlėje. Tai naudinga jūsų vertimams ir tekstams suskirstyti į skirtingas kilmės vietas, pavyzdžiui, antraštę, poraštę ar konkrečias skiltis.

Galite skaityti daugiau apie kilmės 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>
	);
}

Perrašyti 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 kalbą kliento pusėje, vertimų gavimas gali užtrukti kelias akimirkas, priklausomai nuo vartotojo ryšio. Galite rodyti įkėlimo indikatorių, kad pagerintumėte vartotojo patirtį, suteikdami vizualinį atsiliepimą vykdant kalbos keitimą.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Dauginimas

Norint tinkamai valdyti daugiskaitą ir teisingai rodyti etikečių skaičiavimo pagrindu 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 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 to paties teksto vertimus ar reikšmes. Tai ypač naudinga, kai tas pats tekstas remiasi skirtingu kontekstu ir reikalauja skirtingų vertimų. Priskirdami unikalius ID, užtikrinate, kad kiekvienas teksto 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 – kaip „Acceder“ ispanų kalba.

Geriausios praktikos