Nyaraka: Matumizi ya Juu – TacoTranslate

Matumizi ya hali ya juu

Swahili

Kushughulikia lugha zinazosomeka kutoka kulia kwenda kushoto

TacoTranslate hufanya iwe rahisi kusaidia lugha zinazosomwa kutoka kulia kwenda kushoto (RTL), kama vile Kiarabu na Kiebrania, katika programu zako za React. Ushughulikiaji sahihi wa lugha za RTL unahakikisha kuwa maudhui yako yanaonyeshwa kwa usahihi kwa watumiaji wasomao kutoka kulia kwenda kushoto.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Unaweza pia kutumia kazi ya isRightToLeftLocaleCode iliyotolewa kukagua lugha ya sasa nje ya React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Kuzimwa kwa utafsiri

Ili kuzima tafsiri kwa sehemu maalum za mfululizo wa maneno au kuhakikisha vipengele vingine vinahifadhiwa kama ulivyo, unaweza kutumia mabano matatu ya mraba triple square brackets. Kipengele hiki ni muhimu kwa kuhifadhi muundo wa asili wa majina, maneno ya kiufundi, au maudhui mengine yoyote ambayo hayapaswi kutafsiriwa.

import {Translate} from 'tacotranslate/react';

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

Katika mfano huu, neno “TacoTranslate” halitabadilika katika tafsiri.

Watoa huduma wengi wa TacoTranslate

Tunapendekeza sana kutumia watoa huduma mbalimbali za TacoTranslate katika programu yako. Hii ni muhimu kwa kupanga tafsiri zako na mistari katika asili tofauti, kama vile kichwa chako, mguu wa ukurasa, au sehemu maalum.

Unaweza kusoma zaidi kuhusu kutumia asili hapa.

Watoa huduma wa TacoTranslate wanachukua mipangilio kutoka kwa mtoa huduma mzazi, hivyo hutawahitaji kurudia mipangilio mingine yoyote.

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

Kubadili chanzo au eneo

Mbali na kutumia watoa huduma wengi wa TacoTranslate, unaweza pia kubatilisha asili na eneo kwenye vipengele vya Translate na ngazi za kena za useTranslation.

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

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

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

Kushughulikia upakiaji

Unapobadilisha lugha upande wa mteja, kupata tafsiri kunaweza kuchukua muda kidogo kulingana na muunganisho wa mtumiaji. Unaweza kuonyesha kiashiria cha kupakia ili kuboresha uzoefu wa mtumiaji kwa kutoa mrejesho wa kuona wakati wa mabadiliko.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Uwandishaji

Ili kushughulikia wingi na kuonyesha lebo zilizo msingi wa hesabu kwa usahihi katika lugha mbalimbali, hii inachukuliwa kuwa mbinu bora:

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

Lugha nyingi

Kusaidia lugha nyingi kwa wakati mmoja ndani ya programu ile ile, unaweza kutumia watoa huduma wengi wa TacoTranslate wenye thamani tofauti za locale kama inavyoonyeshwa hapa chini:

Unaweza pia kubatilisha locale kuleveli ya sehemu au zebaki.

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

Kutumia vitambulisho vya tafsiri

Unaweza kuongeza id kwa sehemu ya Translate ili kushughulikia tafsiri tofauti au maana mbalimbali za mfuatano huo huo wa maneno. Hii ni muhimu sana wakati maandishi hayo hayo yanahitaji tafsiri tofauti kulingana na muktadha. Kwa kutoa IDs za kipekee, unahakikisha kuwa kila mfano wa mfuatano huo unatafsiriwa kwa usahihi kulingana na maana maalum yake.

import {Translate} from 'tacotranslate/react';

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

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

Kwa mfano, kuingia kichwa cha ukurasa kunaweza kutafsiriwa kama “Iniciar sesión”, na kuingia chini kabisa kwa ukurasa kunaweza kutafsiriwa kama “Acceder” kwa Kihispania.

Mila bora