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

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

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

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

Ең жақсы тәжірибелер