Sənədləşmə: Təkmil istifadə

İrəli səviyyəli istifadə

Azerbaijani

Sağdan sola dillərin idarə olunması

TacoTranslate React tətbiqlərinizdə ərəb və ivrit kimi sağdan sola (RTL) dilləri dəstəkləməyi asanlaşdırır. RTL dillərinin düzgün idarə olunması, məzmununuzun sağdan sola oxuyan istifadəçilərə düzgün göstərilməsini təmin edir.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

Hazırda istifadə olunan dili React xaricində yoxlamaq üçün təqdim olunan isRightToLeftLocaleCode funksiyasından da istifadə edə bilərsiniz.

import {isRightToLeftLocaleCode} from 'tacotranslate';

function foo(locale = 'es') {
	const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
	// ...
}

Tərcümənin deaktiv edilməsi

Bir mətnin müəyyən hissələrində tərcüməni deaktiv etmək və ya bəzi seqmentlərin olduğu kimi qalmasını təmin etmək üçün üçlü kvadrat mötərizələrdən istifadə edə bilərsiniz. Bu xüsusiyyət adların, texniki terminlərin və ya tərcümə olunmamalı olan digər məzmunun orijinal şəklini qorumaq üçün faydalıdır.

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

Bu nümunədə, “TacoTranslate” sözü tərcümədə dəyişməz qalacaq.

Bir neçə TacoTranslate təminatçısı

Biz tətbiqinizdə birdən çox TacoTranslate təminatçılarından istifadə etməyi qəti şəkildə tövsiyə edirik. Bu, tərcümələrinizi və sətirlərinizi başlıq, altbilgi və ya xüsusi bölmələr kimi müxtəlif mənşələrə təşkil etmək üçün faydalıdır.

Siz mənbələrdən istifadə etmə haqqında daha çox məlumatı buradan oxuya bilərsiniz.

TacoTranslate təminatçıları valideyn təminatçısından bütün parametrləri miras alır, beləliklə digər parametrləri təkrarlamağınız lazım deyil.

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

Mənşəyi və ya yerli dili əvəz etmək

Birdən çox TacoTranslate təminatçısından istifadə etməyə əlavə olaraq, həm Translate komponenti, həm də useTranslation hook səviyyələrində origin və locale parametrlərini dəyişə bilərsiniz.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

Yüklənmənin idarə olunması

Müştəri tərəfində dilləri dəyişərkən, tərcümələri əldə etmək istifadəçinin bağlantısına görə bir neçə saniyə çəkə bilər. Keçid zamanı vizual rəy göstərməklə istifadəçi təcrübəsini yaxşılaşdırmaq üçün yüklənmə göstəricisi göstərmək olar.

import {useTacoTranslate} from 'tacotranslate/react';

function Component() {
	const {isLoading} = useTacoTranslate();

	return (
		isLoading ? 'Translations are loading...' : null
	);
}

Çoxluq forması

Çoxluq formasını idarə etmək və say əsasında etiketləri müxtəlif dillərdə düzgün göstərmək üçün bu ən yaxşı təcrübə hesab edilir:

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

Çoxlu dillər

Eyni tətbiq daxilində birdən çox dili eyni vaxtda dəstəkləmək üçün, aşağıda göstərildiyi kimi müxtəlif locale dəyərləri ilə bir neçə TacoTranslate təminatçısından istifadə edə bilərsiniz:

Siz həmçinin locale komponent və ya hook səviyyəsində dəyişə bilərsiniz.

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

Tərcümə ID-lərindən istifadə

Eyni sətir üçün müxtəlif tərcümələri və ya mənaları idarə etmək üçün Translate komponentinə id əlavə edə bilərsiniz. Bu, xüsusilə eyni mətnin kontekstə əsasən fərqli tərcümələr tələb etdiyi hallarda faydalıdır. Unikal ID-lər təyin etməklə, sətirin hər bir nümunəsinin öz spesifik mənasına uyğun olaraq dəqiq tərcümə olunmasını təmin edirsiniz.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

Məsələn, başlıq giriş üçün ispan dilində “Iniciar sesión”, altbilgi giriş üçün isə “Acceder” kimi tərcümə oluna bilər.

Ən yaxşı təcrübələr