Құжаттама: Кеңейтілген пайдалану

Кеңейтілген пайдалану

Kazakh

Оңнан солға жазылатын тілдерді өңдеу

TacoTranslate сіздің React қолданбаларыңызда араб және иврит сияқты оңнан солға қарай жазылатын (RTL) тілдерді қолдауды жеңілдетеді. RTL тілдерін дұрыс өңдеу мазмұныңыздың оңнан солға қарай оқитын пайдаланушылар үшін дұрыс көрсетілуін қамтамасыз етеді.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Сондай-ақ берілген isRightToLeftLocaleCode функциясын React сыртында ағымдағы тілді тексеру үшін пайдалануға болады.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Аударманы өшіру

Мәтіннің белгілі бөліктерін аудармау үшін немесе кейбір үзінділердің дәл сол күйінде сақталуын қамтамасыз ету үшін үштік шаршы жақшаларды пайдалануға болады. Бұл мүмкіндік атаулардың, техникалық терминдердің немесе аудармауға жататын кез келген басқа мазмұнның бастапқы форматын сақтауға пайдалы.

import {Translate} from 'tacotranslate/react';

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

Осы мысалда “TacoTranslate” сөзі аудармада өзгеріссіз қалады.

Бірнеше TacoTranslate провайдерлері

Біз қолданбаңызда бірнеше TacoTranslate провайдерлерін пайдалануды қатты ұсынамыз. Бұл аудармаларыңызды және жолдарыңызды әртүрлі дереккөздерге, мысалы жоғарғы бөлік (header), төменгі бөлік (footer) немесе нақты бөлімдерге ұйымдастыруға пайдалы.

Сіз origin-дарды пайдалану туралы толығырақ мына жерден оқи аласыз.

TacoTranslate провайдерлері кез келген ата-аналық провайдерден баптауларды мұра етеді, сондықтан басқа баптауларды қайталап енгізудің қажеті жоқ.

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

Origin немесе locale-ды басып жазу

Көптеген TacoTranslate провайдерлерін пайдаланумен қатар, сіз origin мен locale екеуін де Translate компонентінде және useTranslation хук деңгейлерінде қайта анықтай аласыз.

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

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

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

Жүктеу күйін басқару

Клиент жағында тілді өзгерткенде, аудармаларды алу пайдаланушының байланысына байланысты бірнеше сәт алуы мүмкін. Ауыстыру кезінде пайдаланушыға визуалды кері байланыс беру үшін жүктеу индикаторын көрсетуге болады.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Көпше түрлендіру

Көпше түрлерді өңдеу мен санаға негізделген белгілерді әртүрлі тілдерде дұрыс көрсету үшін бұл ең жақсы тәжірибе деп есептеледі:

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

Бірнеше тіл

Бір қосымшада бір уақытта бірнеше тілді қолдау үшін сіз бірнеше TacoTranslate провайдерлерін әртүрлі locale мәндерімен пайдалана аласыз, төменде көрсетілгендей:

Сіз сондай-ақ locale мәнін компонент немесе хук деңгейінде қайта анықтай аласыз.

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

Аударма идентификаторларын қолдану

Сіз бірдей жол үшін әртүрлі аудармалар немесе мағыналарды өңдеу үшін Translate компонентіне id қоса аласыз. Бұл бірдей мәтін контекстке қарай әртүрлі аудармалар қажет болатын жағдайларда әсіресе пайдалы. Бірегей идентификаторларды тағайындау арқылы жолдың әрбір данасы оның нақты мағынасына сәйкес дәл аударылуын қамтамасыз етесіз.

import {Translate} from 'tacotranslate/react';

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

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

Мысалы, хедердегі (header) кіру батырмасы испан тілінде “Iniciar sesión” деп аударылуы мүмкін, ал футердегі (footer) кіру батырмасы испан тілінде “Acceder” деп аударылуы мүмкін.

Үздік тәжірибелер