Dokumentācija: Padziļināta lietošana

Padziļināta lietošana

Latvian

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

TacoTranslate ļauj viegli atbalstīt no labās uz kreiso (RTL) rakstītās valodas, piemēram, arābu un ivritu, 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.

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 sniegto 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 tulkojumu konkrētām virknes daļām vai nodrošinātu, ka noteikti segmenti tiek saglabāti nemainīti, varat izmantot trīskāršas kvadrātiekavas. Šī funkcija ir noderīga, lai saglabātu vārdu, tehnisko terminu vai jebkura cita satura oriģinālo formātu, kas nav domāts tulkošanai.

import {Translate} from 'tacotranslate/react';

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

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

Vairāki TacoTranslate nodrošinātāji

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

Jūs varat lasīt vairāk par originu izmantošanu šeit.

TacoTranslate nodrošinātāji manto iestatījumus no jebkura vecākā nodrošinātāja, tāpēc jums nebūs jāatkārto pārējie 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

Pārslēdzoties valodai klienta pusē, tulkojumu iegūšana var aizņemt dažas sekundes, atkarībā no lietotāja savienojuma. Lai uzlabotu lietotāja pieredzi un sniegtu vizuālu atgriezenisko saiti pārslēgšanās laikā, varat rādīt ielādes indikatoru.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Daudzskaitļu atbalsts

Lai dažādās valodās pareizi apstrādātu daudzskaitļus un attēlotu ar skaitu saistītas etiķetes, tas tiek uzskatīts 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 vienā lietotnē atbalstītu vairākas valodas, varat izmantot vairākus TacoTranslate sniedzē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 hooka 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

Jūs varat pievienot id komponentam Translate, lai apstrādātu dažādus tulkojumus vai nozīmes vienai un tai pašai virknei. Tas ir īpaši noderīgi, ja viens un tas pats teksts dažādos kontekstos prasa atšķirīgus tulkojumus. Piešķirot unikālus id, jūs nodrošināt, ka katra šīs virknes 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”, bet kājenes pieteikšanās var tikt tulkota kā “Acceder” spāņu valodā.

Labākā prakse