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ə, məsələn ərəb və ivrit kimi sağdan sola (RTL) yazılan 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 şəkildə 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>
	);
}

Siz həmçinin təqdim edilmiş isRightToLeftLocaleCode funksiyasından React-dən kənarda cari dili yoxlamaq üçün 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ətrin müəyyən hissələrinin tərcüməsini söndürmək və ya bəzi seqmentlərin olduğu kimi qorunması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 istənilən 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əz qalacaq.

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

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

You can Originlərdən istifadə barədə daha çox məlumatı buradan oxuya bilərsiniz.

TacoTranslate provayderləri istənilən üst provayderdən ayarları miras alır, beləliklə digər ayarları təkrarlamağa ehtiyacınız olmayacaq.

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şənin və ya lokalın üstələnməsi

Bir neçə TacoTranslate provayderindən istifadə etməklə yanaşı, həm Translate komponentində, həm də useTranslation hook səviyyəsində origin və locale parametrlərini əvəz edə 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ə edilməsi

Klient tərəfində dil dəyişdirərkən, tərcümələrin yüklənməsi istifadəçinin internet bağlantısından asılı olaraq bir neçə saniyə çəkə bilər. Keçid zamanı vizual geribildirim verərək istifadəçi təcrübəsini yaxşılaşdırmaq üçün yüklənmə indikatoru göstərə bilərsiniz.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Çoğullaşdırma

Çoxluq formaları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 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)}}
		/>
	);
}

Çoxlu dillər

Eyni tətbiqdə bir neçə dili eyni anda dəstəkləmək üçün aşağıda göstərildiyi kimi müxtəlif locale dəyərlərinə malik bir neçə TacoTranslate provayderindən istifadə edə bilərsiniz:

Həmçinin locale dəyərini komponent və ya hook səviyyəsində dəyişdirə 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ə identifikatorlarından istifadə

Eyni sətrin müxtəlif tərcümələrini və ya mənalarını idarə etmək üçün idı Translate komponentinə əlavə edə bilərsiniz. Bu, eyni mətnin kontekstdən asılı olaraq müxtəlif tərcümələr tələb etdiyi zaman xüsusilə faydalıdır. Unikal ID-lər təyin etməklə, sətrin hər bir nümunəsinin onun konkret 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ıqdakı giriş İspan dilində “Iniciar sesión”, altbilgidəki giriş isə “Acceder” kimi tərcümə oluna bilər.

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