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

Gelişmiş 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ə 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>
	);
}

Siz həmçinin cari dili React xaricində yoxlamaq üçün təqdim olunan isRightToLeftLocaleCode funksiyasından 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əri üçün tərcüməni bağlamaq və ya bəzi seqmentlərin olduğu kimi saxlanılması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ə edilməməli olan digər məzmunun orijinal formatının qorunması üçü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.

Birdən çox TacoTranslate təminatçısı

Biz tətbiqinizdə birdən çox TacoTranslate təminatçısından istifadə etməyi şiddətlə tövsiyə edirik. Bu, tərcümələrinizi və simvollarınızı 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 haqqında daha ətraflı oxuya bilərsiniz.

TacoTranslate təminatçıları hər hansı bir valideyn təminatçısından parametrləri miras alır, buna görə də 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>
	);
}

Mənşəyi və ya yerli dili əvəz etmək

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

Müştəri tərəfində dillər dəyişdirilərkən, istifadəçinin bağlantısından asılı olaraq tərcümələrin alınması bir neçə dəqiqə çəkə bilər. Dəyişiklik 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ı

Çoxluq formasını idarə etmək və fərqli dillərdə 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)}}
		/>
	);
}

Çoxsaylı dillər

Eyni tətbiqdə bir neçə dili eyni anda dəstəkləmək üçün, aşağıda göstərildiyi kimi fərqli locale dəyərləri olan bir neçə TacoTranslate təminatçısından istifadə edə bilərsiniz:

Siz həmçinin locale komponent və ya hook səviyyəsində əvəz edə 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 müxtəlif 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ər tələb olunduqda xüsusilə faydalıdır. Unikal ID-lər təyin etməklə, mətnin hər bir nümunəsinin xüsusi 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, header login ispanca “Iniciar sesión”, footer login isə “Acceder” kimi tərcümə oluna bilər.

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