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

Təkmil istifadə

Azerbaijani

Sağdan-sola dillərin idarə olunması

TacoTranslate React tətbiqlərinizdə Ərəb və İbrani kimi sağdan sola (RTL) dilləri dəstəkləməyi asanlaşdırır. RTL dillərinin düzgün işlənməsi, 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>
	);
}

Hal-hazırkı 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

Mətnin müəyyən hissələrinin tərcüməsini deaktiv etmək və ya bəzi seqmentlərin olduğu kimi saxlanmasını təmin etmək üçün üçqat kvadrat mötərizələrdən istifadə edə bilərsiniz. Bu funksiya adların, texniki terminlərin və ya tərcümə edilməməli olan digər məzmunların 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ə birdən çox TacoTranslate provayderindən istifadə etməyi güclü şəkildə tövsiyə edirik. Bu, tərcümələrinizi və mətnləri 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.

Burada mənşələrin istifadəsi haqqında daha çox oxuya bilərsiniz.

TacoTranslate təminatçıları hər hansı valideyn təminatçısından parametrləri miras alır, buna görə digər parametrləri təkrarlamağa 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ənbəni və ya dil dəstəyini üstələmə

Bir neçə TacoTranslate təminatçısından istifadə etməklə yanaşı, həmçinin Translate komponenti, həm də useTranslation hook səviyyələrində həm origin, həm də locale dəyərlərini 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əmənin idarə edilməsi

Müştəri tərəfində dili dəyişdirərkən, tərcümələrin alınması istifadəçinin bağlantısına görə bir neçə saniyə çəkə bilər. Dəyişikliyi zamanı istifadəçi təcrübəsini yaxşılaşdırmaq üçün vizual geribildirim təmin edən yüklənmə göstəricisini göstərmək olar.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Çoxluq forması

Fərqli dillərdə çoxalma qaydasını 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

Eyni tətbiqdə birdən çox dili eyni anda dəstəkləmək üçün, aşağıda göstərildiyi kimi fərqli 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ə ü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 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ətndə kontekstdən asılı olaraq fərqli tərcümələrin tələb olunduğu hallarda xüsusilə faydalıdır. Unikal ID-lər təyin etməklə, sətirin hər bir nüsxəsinin öz spesifik mənasına uyğun şəkildə 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, header login İspan dilində “Iniciar sesión”, footer login isə “Acceder” kimi tərcümə oluna bilər.

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