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

Жетілдірілген пайдалану

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 провайдерін пайдалануды қатты ұсынамыз. Бұл аудармаларыңызды және мәтін жолдарын әртүрлі бастапқы көздерге — мысалы, жоғарғы бөлімге, төменгі бөлімге немесе нақты бөлімдерге — ұйымдастыруға пайдалы.

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

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 провайдерлерін пайдаланумен қатар, сіз Translate компоненті мен useTranslation хук деңгейлерінде origin пен locale екеуін де қайта жаза аласыз.

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

Көптеген тілдер

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

Сіз сондай-ақ 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 қоса аласыз. Бұл бірдей мәтін контекстке байланысты әртүрлі аудармаларды талап еткен кезде әсіресе пайдалы. Бірегей id тағайындау арқылы мәтіннің әрбір данасы оның нақты мағынасына сай дәл аударылуын қамтамасыз етесіз.

import {Translate} from 'tacotranslate/react';

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

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

Мысалы, тақырыптағы кіру түймесі испан тілінде “Iniciar sesión” деп аударылуы мүмкін, ал төменгі бөлімдегі кіру түймесі “Acceder” деп аударылуы мүмкін.

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