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

Жетілдірілген пайдалану

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

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

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