Dokumentacija: Napredna raba

Nadgrajena raba

Slovenian

Ravnanje z jeziki, ki se berejo od desne proti levi

TacoTranslate olajša podporo jezikom, ki se berejo od desne proti levi (RTL), kot sta arabščina in hebrejščina, v vaših React aplikacijah. Pravilno ravnanje z jeziki RTL zagotavlja, da je vaša vsebina pravilno prikazana za uporabnike, ki berejo od desne proti levi.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Lahko tudi uporabite predhodno določeno funkcijo isRightToLeftLocaleCode, da preverite trenutni jezik zunaj okolja React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Onemogočanje prevajanja

Za onemogočanje prevajanja določenih delov niza ali za zagotavljanje, da so določeni odseki ohranjeni nespremenjeni, lahko uporabite trojne oglate oklepaje. Ta funkcija je uporabna za ohranjanje izvirne oblike imen, tehničnih izrazov ali katere koli druge vsebine, ki se ne sme prevajati.

import {Translate} from 'tacotranslate/react';

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

V tem primeru bo beseda “TacoTranslate” ostala nespremenjena v prevodu.

Več ponudnikov TacoTranslate

Močno priporočamo uporabo več ponudnikov TacoTranslate v vaši aplikaciji. To je koristno za organizacijo vaših prevodov in nizov v različne izvore, kot so vaš naslov, noga ali določeni razdelki.

Lahko preberete več o uporabi izvorov tukaj.

Ponudniki TacoTranslate dedujejo nastavitve od kateregakoli nadrejenega ponudnika, zato vam ni treba ponavljati nobenih drugih nastavitev.

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

Preglasitev izvora ali lokalizacije

Poleg uporabe več TacoTranslate ponudnikov lahko tudi prekrijete tako origin kot locale na nivojih komponent Translate in hooka useTranslation.

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

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

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

Ravnanje z nalaganjem

Pri menjavi jezikov na strani odjemalca lahko pridobivanje prevodov traja nekaj trenutkov, odvisno od povezave uporabnika. Za izboljšanje uporabniške izkušnje lahko prikažete indikator nalaganja, ki zagotavlja vizualno povratno informacijo med preklopom.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pojavljanje števil

Za pravilno ravnanje s množinsko obliko in pravilno prikazovanje oznak, odvisnih od števila, v različnih jezikih velja naslednji najboljši pristop:

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

Več jezikov

Za podporo več jezikom hkrati znotraj iste aplikacije lahko uporabite več ponudnikov TacoTranslate z različnimi vrednostmi locale, kot je prikazano spodaj:

Prav tako lahko preglasite locale na ravni komponente ali hooka.

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

Uporaba ID-jev za prevajanje

Lahko dodate id komponenti Translate, da obdelate različne prevode ali pomene za isti niz. To je še posebej koristno, kadar isti tekst zahteva različne prevode glede na kontekst. Z dodelitvijo unikatnih ID-jev zagotovite, da je vsak primer niza preveden natančno glede na njegov specifičen pomen.

import {Translate} from 'tacotranslate/react';

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

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

Na primer, prijava v glavi se lahko prevede v „Iniciar sesión“, prijava v nogi pa v „Acceder“ v španščini.

Najboljše prakse