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

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

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

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

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

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

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

Түпнұсқаны немесе локалді өзгерту

Бірнеше 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>
	);
}

Аудару идентификаторларын пайдалану

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

import {Translate} from 'tacotranslate/react';

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

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

Мысалы, header login «Iniciar sesión» деп аударылуы мүмкін, ал footer login испан тілінде «Acceder» деп аударылуы мүмкін.

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