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

Qabaqcıl istifadə

Azerbaijani

Sağdan-sola yazılan dillərin idarə edilməsi

TacoTranslate React tətbiqlərinizdə ərəb və ivrit kimi sağdan-sola (RTL) dillərə dəstəyi asanlaşdırır. RTL dillərinin düzgün şəkildə idarə edilməsi 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>
	);
}

Həmçinin təqdim olunan isRightToLeftLocaleCode funksiyasından istifadə edərək cari dili React xaricində yoxlaya bilərsiniz.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Tərcüməni deaktiv etmək

Bir mətnin müəyyən hissələrinin tərcüməsini ləğv etmək və ya bəzi seqmentlərin olduğu kimi qorunmasını təmin etmək üçün üçqat 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ı digər məzmunun orijinal formatını qorumaqda 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 provayderi

Tətbiqinizdə bir neçə TacoTranslate provayderindən istifadə etməyi qətiyyətlə tövsiyə edirik. Bu, tərcümələrinizi və sətirlərinizi müxtəlif mənşələrə — məsələn başlıq, altbilgi və ya müəyyən bölmələrə — təşkil etmək üçün faydalıdır.

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

TacoTranslate provayderləri hər hansı bir ana provayderdən parametrləri miras alır, buna görə digər parametrləri təkrar etməli olmayacaqsınız.

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

Origin və ya lokalı əvəz etmək

Bir neçə TacoTranslate provayderindən istifadə etməklə yanaşı, Translate komponenti və useTranslation hook səviyyələrində həm origin-i, həm də locale-i dəyişdirə 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əni idarə etmək

Klient tərəfində dilləri dəyişdirərkən, tərcümələrin alınması istifadəçinin bağlantısından asılı olaraq bir neçə saniyə çəkə bilər. Dəyişiklik zamanı vizual geribildirim verə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
	);
}

Çoxluqlaşdırma

Müxtəlif dillərdə çoğullaşdırmanı idarə etmək və say əsaslı etiketləri düzgün göstərmək üçün bu ən yaxşı təcrübə hesab olunur:

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

Bir tətbiq daxilində eyni anda bir neçə dili 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 provayderindən istifadə edə bilərsiniz:

Siz həmçinin locale komponent və ya hook səviyyəsində üstələyə 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 fərqli tərcümələri və ya mənaları idarə etmək üçün Translate komponentinə id əlavə edə bilərsiniz. Bu, eyni mətnin kontekstdən asılı olaraq fərqli tərcümələr tələb etdiyi hallarda xüsusilə faydalıdır. Unikal ID-lər təyin etməklə, hər bir mətn nümunəsinin konkret mənasına uyğun dəqiq tərcümə olunduğundan əmin olursunuz.

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ıqdakı giriş İspan dilində “Iniciar sesión”, altbilgədəki giriş isə İspan dilində “Acceder” ola bilər.

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