Dokumentācija: Papildu lietošana

Padziļināta lietošana

Latvian

Darbs ar no labās uz kreiso rakstītajām valodām

TacoTranslate atvieglo atbalstu valodām, kas rakstītas no labās uz kreiso (RTL), piemēram, arābu un ebreju, jūsu React lietotnēs. Pareiza RTL valodu apstrāde nodrošina, ka jūsu saturs tiek pareizi attēlots lietotājiem, kuri lasa no labās uz kreiso pusi.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

Jūs varat arī izmantot nodrošināto isRightToLeftLocaleCode funkciju, lai pārbaudītu pašreizējo valodu ārpus React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

function foo(locale = 'es') {
	const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
	// ...
}

Tulkošanas atspējošana

Lai atspējotu tulkošanu konkrētām teksta virknes daļām vai nodrošinātu, ka noteikti segmenti paliek nemainīti, varat izmantot trīskāršas kvadrātiekavas. Šī funkcija ir noderīga, lai saglabātu vārdu oriģinālo formātu, tehniskos terminus vai jebkuru citu saturu, kas nav jāiztulko.

import {Translate} from 'tacotranslate/react';

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

Šajā piemērā vārds “TacoTranslate” paliks nemainīgs tulkojumā.

Vairāki TacoTranslate pakalpojumu sniedzēji

Mēs stingri iesakām izmantot vairākus TacoTranslate nodrošinātājus savā lietotnē. Tas ir noderīgi, lai organizētu savus tulkojumus un virknes dažādos avotos, piemēram, galvenē, kājenē vai konkrētās sadaļās.

Jūs variet uzzināt vairāk par avotu izmantošanu šeit.

TacoTranslate provideri manto iestatījumus no jebkura vecākā nodrošinātāja, tāpēc jums nebūs jāatkārto citi iestatījumi.

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

Izcelsmes vai lokāles pārrakstīšana

Papildus vairāku TacoTranslate nodrošinātāju izmantošanai, jūs varat arī pārrakstīt gan origin, gan locale Translate komponenta un useTranslation hook līmeņos.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

Ielādes apstrāde

Mainot valodu klienta pusē, tulkojumu iegūšana var aizņemt nedaudz laika atkarībā no lietotāja savienojuma. Varat rādīt ielādes indikatoru, lai uzlabotu lietotāja pieredzi, sniedzot vizuālu atgriezenisko saiti valodas maiņas laikā.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Daudzskaitlība

Lai pareizi apstrādātu daudzskaitles formas un attēlotu no skaita atkarīgas etiķetes dažādās valodās, to uzskata par labāko praksi:

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

Vairākas valodas

Lai vienlaikus atbalstītu vairākas valodas vienā lietotnē, varat izmantot vairākus TacoTranslate nodrošinātājus ar dažādām locale vērtībām, kā parādīts zemāk:

Jūs varat arī pārrakstīt locale komponenta vai hook līmenī.

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

Tulkojumu ID izmantošana

Varat pievienot id komponentam Translate, lai apstrādātu dažādus tulkojumus vai nozīmes vienam un tam pašam tekstam. Tas īpaši noder, ja tas pats teksts kontekstā prasa dažādus tulkojumus. Piešķirot unikālus id, jūs nodrošināt, ka katra šī teksta instance tiek tulkota precīzi atbilstoši tās konkrētajai nozīmei.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

Piemēram, galvenes pieteikšanās var tikt tulkota kā “Iniciar sesión”, un kājenes pieteikšanās var tikt tulkota kā “Acceder” spāņu valodā.

Labākā prakse