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

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

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

Сіз 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 провайдерін қолданумен қатар, сіз 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 компонент немесе hook деңгейінде қайта анықтай аласыз.

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

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

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

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” деп испан тілінде аударылуы мүмкін.

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