Sənədləşmə: Qabaqcıl istifadə

Qabaqcıl 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 üçün 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əni deaktiv etmək

Bir sətirin müəyyən hissələrinin tərcüməsini ləğv etmək və ya müəyyən seqmentlərin olduğu kimi saxlanmasını təmin etmək üçün üçlük künc mötərizələrindən istifadə edə bilərsiniz. Bu xüsusiyyət adların, texniki terminlərin və ya tərcümə edilməməli olan digər məzmunun orijinal formatını 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əyəcək.

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

Biz tətbiqinizdə bir neçə TacoTranslate təminatçısından istifadə etməyi qətiyyətlə tövsiyə edirik. Bu, tərcümələrinizi və sətrlərinizi başlıq, altbilgi və ya xüsusi bölmələr kimi müxtəlif mənşələrə bölmək üçün faydalıdır.

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

TacoTranslate provayderləri hər hansı bir valideyn provayderdən parametrləri miras alır, buna görə də digər parametrləri təkrarlamağınıza ehtiyac qalmır.

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 lokalı üstələmək

Çoxsaylı TacoTranslate təminatçılarından istifadə etməklə yanaşı, həm də Translate komponentində, həm də useTranslation hook səviyyələrində həm origin, həm də locale dəyərlə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, istifadəçinin bağlantısına görə tərcümələrin yüklənməsi bir neçə saniyə çəkə bilər. Keçid zamanı vizual geribildirim təmin edərək istifadəçi təcrübəsini yaxşılaşdırmaq üçün yükləmə göstəricisi göstərə bilərsiniz.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Çoxluq forması

Çoxluğu idarə etmək və müxtəlif dillərdə say əsasında etiketləri 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)}}
		/>
	);
}

Bir neçə dil

Eyni tətbiqdə birdən çox dili eyni zamanda 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 dəyərini komponent və ya hook səviyyəsində üstələ 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ə etmək

Eyni mətn üçün fərqli tərcümələr və ya mənalarla işləmək üçün Translate komponentinə id əlavə edə bilərsiniz. Bu xüsusilə eyni mətnin kontekstdən asılı olaraq müxtəlif tərcümələr tələb etdiyi zaman faydalıdır. Unikal ID-lər təyin etməklə, mətnin hər bir nümunəsinin spesifik mənasına uyğun olaraq düzgün 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, header login ispanca “Iniciar sesión” olaraq, footer login isə “Acceder” olaraq tərcümə oluna bilər.

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