TacoTranslate
/
DokumentációÁrazás
 
  1. Bevezetés
  2. Első lépések
  3. Beállítás és konfiguráció
  4. TacoTranslate használata
  5. Szerveroldali renderelés
  6. Haladó használat
  7. Legjobb gyakorlatok
  8. Hibakezelés és hibakeresés
  9. Támogatott nyelvek

Haladó használat

Jobbról balra írt nyelvek kezelése

TacoTranslate megkönnyíti a jobbról balra olvasó (RTL) nyelvek, például az arab és a héber támogatását a React-alkalmazásaiban. Az RTL-nyelvek megfelelő kezelése biztosítja, hogy a tartalom helyesen jelenjen meg a jobbról balra olvasó felhasználók számára.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

A rendelkezésre bocsátott isRightToLeftLocaleCode függvényt is használhatod a jelenlegi nyelv ellenőrzésére a React-en kívül.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Fordítás letiltása

Ha le szeretnéd tiltani egy szöveg bizonyos részeinek fordítását, vagy biztosítani szeretnéd, hogy egyes részek változatlanok maradjanak, használhatod a háromszoros szögletes zárójeleket. Ez a funkció hasznos a nevek, műszaki kifejezések vagy bármely olyan tartalom eredeti formátumának megőrzéséhez, amelyet nem szabad lefordítani.

import {Translate} from 'tacotranslate/react';

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

Ebben a példában a szó “TacoTranslate” változatlan marad a fordításban.

Több TacoTranslate-szolgáltató

Erősen javasoljuk, hogy alkalmazásában több TacoTranslate szolgáltatót használjon. Ez hasznos a fordítások és a karakterláncok különböző eredetekbe (például a fejlécbe, a láblécbe vagy egyes szakaszokba) rendezéséhez.

További információt az originok használatáról itt olvashat.

TacoTranslate szolgáltatók öröklik a beállításokat bármely szülő szolgáltatótól, így nem kell megismételnie a többi beállítást.

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

Az origin vagy a locale felülírása

A több TacoTranslate provider használata mellett a Translate komponens és a useTranslation hook szintjén egyaránt felülírhatja az originet és a locale-ot.

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

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

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

Betöltés kezelése

Amikor kliensoldalon váltasz nyelvet, a fordítások lekérése a felhasználó internetkapcsolatától függően néhány pillanatot igénybe vehet. Megjeleníthetsz egy betöltésjelzőt, amely vizuális visszajelzést ad a váltás alatt, ezáltal javítva a felhasználói élményt.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Többes szám

A többes számok és a számhoz kötődő címkék helyes kezelése különböző nyelveken érdekében ez tekinthető legjobb gyakorlatnak:

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

Több nyelv

Annak érdekében, hogy ugyanabban az alkalmazásban egyszerre több nyelvet is támogass, használhatod a több TacoTranslate szolgáltatót különböző locale értékekkel, az alább látható módon:

A locale értékét a komponens- vagy hook-szinten is felülírhatja.

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

Fordítási azonosítók használata

Hozzáadhatsz egy id értéket a Translate komponenshez, hogy ugyanannak a szövegnek különböző fordításait vagy jelentéseit kezeld. Ez különösen hasznos, ha ugyanaz a szöveg a kontextustól függően eltérő fordítást igényel. Egyedi azonosítók hozzárendelésével biztosíthatod, hogy a szöveg minden előfordulása a konkrét jelentésének megfelelően pontos fordítást kapjon.

import {Translate} from 'tacotranslate/react';

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

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

Például a fejlécben a bejelentkezés spanyolul lehet „Iniciar sesión”, míg a láblécben a bejelentkezés lehet „Acceder”.

Legjobb gyakorlatok

Egy termék a Nattskiftet-tőlNorvégiában készült