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

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

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

Бастапқы көзді немесе локальды басып жазу

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

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

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

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

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