Құжаттама: Күрделірек қолдану

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

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

Сіз бұнда 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>
	);
}

Бастапқы не локальды қайта жазу

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

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

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