TacoTranslate
/
DokumentācijaCenu noteikšana
 
  1. Ievads
  2. Sākšana
  3. Iestatīšana un konfigurācija
  4. Izmantojot TacoTranslate
  5. Servera puses renderēšana
  6. Papildu lietošana
  7. Labākās prakses
  8. Kļūdu apstrāde un atkļūdošana
  9. Atbalstītās valodas

Papildu lietošana

Labojot valodas ar rakstību no labās uz kreiso pusi

TacoTranslate padara vieglu labošanas valodu (RTL), piemēram, arābu un ebreju, atbalstu jūsu React lietotnēs. Pareiza RTL valodu apstrāde nodrošina, ka 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 nodoto funkciju isRightToLeftLocaleCode pašreizējās valodas pārbaudei ārpus React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Tulkojuma 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 sākotnējo formātu nosaukumiem, tehniskiem terminiem vai jebkuram citam saturam, kas nav jāiztulko.

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 virknes dažādās izcelsmēs, piemēram, jūsu galvenē, kājenē vai konkrētās sadaļās.

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

TacoTranslate nodrošinātāji manto iestatījumus no jebkura vecāku nodrošinātāja, tāpēc jums nav 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>
	);
}

Pārrakstīt izcelsmi vai lokalizāciju

Papildus vairāku TacoTranslate nodrošinātāju izmantošanai, jūs varat arī pārrakstīt gan izcelsmi, gan valodu Translate komponenta un useTranslation īsceļa 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

Valodu maiņas gadījumā klienta pusē tulkojumu iegūšana var aizņemt dažas sekundes atkarībā no lietotāja savienojuma. Jūs varat rādīt ielādes indikatoru, lai uzlabotu lietotāja pieredzi, nodrošinot vizuālu atsauksmi pārejas laikā.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Daudzskaitļa lietojums

Lai pareizi apstrādātu daudzskaitli un rādītu etiķetes, kas balstītas uz skaitu 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āku valodu atbalsts

Lai vienlaikus atbalstītu vairākas valodas vienā lietotnē, varat izmantojiet vairākus TacoTranslate pakalpojumu 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 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>
	);
}

Tulkošanas ID izmantošana

Jūs varat pievienot id komponentam Translate, lai apstrādātu dažādas tulkošanas vai nozīmes tai pašai virknei. Tas ir īpaši noderīgi, ja tai pašai tekstam nepieciešamas atšķirīgas tulkojuma versijas atkarībā no konteksta. Piesaistot unikālus ID, jūs nodrošināt, ka katrs virknes instances tulkojums ir precīzs 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ās prakses

Produkts no Nattskiftet