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

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

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

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

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

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