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

Qabaqcıl istifadə

Azerbaijani

Sağdan sola yazılan dillərlə işləmək

TacoTranslate React tətbiqlərinizdə, məsələn Ərəb və İvrit kimi sağdan sola (RTL) dilləri dəstəkləməyi asanlaşdırır. RTL dillərini düzgün şəkildə idarə etmək 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əmin edilmiş isRightToLeftLocaleCode funksiyasından istifadə edərək React xaricində cari dili 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 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 saxlanması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 hər hansı 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ı

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ə mətnlərinizi başlıq, altbilgi və ya xüsusi bölmələr kimi müxtəlif mənbələrə təşkil etmək üçün faydalıdır.

Siz mənbələrin istifadəsi barədə daha ətraflı məlumatı burada oxuya bilərsiniz.

TacoTranslate provayderləri hər hansı bir ana provayderdən ayarları miras alır, buna görə digər ayarları təkrarlamağa ehtiyac qalmayacaq.

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şə və ya lokalı əvəz etmək

Bir neçə TacoTranslate provayderindən istifadə etməyə əlavə olaraq, Translate komponenti və useTranslation hook səviyyələrində həm origin-i, həm də locale-i ə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ə dili dəyişdirərkən tərcümələrin yüklənməsi istifadəçinin şəbəkə bağlantısından asılı olaraq bir neçə saniyə çəkə bilər. Keçid zamanı vizual geribildirim təqdim edərək istifadəçi təcrübəsini yaxşılaşdırmaq üçün yüklənmə 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 qaydaları

Çoğul formaların idarə edilməsi və say əsasında etiketlərin müxtəlif dillərdə düzgün göstərilməsi üçü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)}}
		/>
	);
}

Çoxsaylı dillər

Eyni tətbiqdə birdən çox dili eyni vaxtda dəstəkləmək üçün, aşağıda göstərildiyi kimi fərqli 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ə 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ə ID-lərindən istifadə

Siz eyni sətr üçün müxtəlif tərcümələri və ya mənaları idarə etmək üçün id atributunu Translate komponentinə əlavə edə bilərsiniz. Bu xüsusilə eyni mətnin kontekstdən asılı olaraq fərqli tərcümələr tələb etdiyi hallarda faydalıdır. Unikal ID-lər təyin etməklə hər bir mətn nümunəsinin onun xüsusi mənasına uyğun olaraq 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ş “Iniciar sesión”, altbilgidəki giriş isə “Acceder” İspan dilinə tərcümə oluna bilər.

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