დოკუმენტაცია: მოწინავე გამოყენება

მოწინავე გამოყენება

Georgian

მარჯვნიდან-მარცხნივ (RTL) ენების მხარდაჭერა

TacoTranslate აადვილებს მარჯვნიდან მარცხნივ (RTL) წერის ენების, როგორიცაა არაბული და ებრაული, მხარდაჭერას თქვენს React აპლიკაციებში. RTL ენების სწორი დამუშავება უზრუნველყოფს, რომ თქვენი შინაარსი სწორად იყოს ნაჩვენები იმ მომხმარებლებისთვის, რომლებიც კითხულობენ მარჯვნიდან მარცხნივ.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

თქვენ ასევე შეგიძლიათ გამოიყენოთ მიწოდებული isRightToLeftLocaleCode ფუნქცია მიმდინარე ენის გასამოწმებლად React-ის გარეთ.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

თარგმნის გამორთვა

სტრიქონის კონკრეტული ნაწილებისთვის გადათარგმნის გამორთვის ან იმის უზრუნველსაყოფად, რომ გარკვეული მონაკვეთები უცვლელად დარჩეს, შეგიძლიათ გამოიყენოთ სამმაგი კვადრატული ფრჩხილები. ეს ფუნქცია სასარგებლოა სახელების, ტექნიკური ტერმინების ან ნებისმიერი სხვა შინაარსის თავდაპირველი ფორმატის შენარჩუნებისთვის, რომელიც არ უნდა იყოს გადათარგმნილი.

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

ამ მაგალითში სიტყვა “TacoTranslate” თარგმანში უცვლელი დარჩება.

მრავალი TacoTranslate მიმწოდებელი

ჩვენ მტკიცედ გირჩევთ გამოიყენოთ რამდენიმე TacoTranslate პროვაიდერი თქვენს აპში. ეს ხელს უწყობს თარგმანებისა და სტრიქონების ორგანიზებას სხვადასხვა ორიგინებში, მაგალითად თქვენს ჰედერში, ფუტერში ან კონკრეტულ განყოფილებებში.

თქვენ შეგიძლიათ აქ უფრო დაწვრილებით გაეცნოთ ორიგინების გამოყენებას.

TacoTranslate პროვაიდერები იღებენ პარამეტრებს ნებისმიერ მშობელ პროვაიდერიდან, ამიტომ სხვა პარამეტრების გამეორება არ დაგჭირდებათ.

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

ორიგინის ან ლოკალის გადაფარვა

მრავალ TacoTranslate პროვაიდერის გამოყენების გარდა, თქვენ ასევე შეგიძლიათ გადაფაროთ როგორც origin, ისე locale Translate კომპონენტსა და useTranslation ჰუკ დონეებზე.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

ჩატვირთვის მართვა

ენების კლიენტურ მხარეზე გადართვისას თარგმანების მიღება შესაძლოა რამდენიმე მომენტს გაგრძელდეს — ყველაფერი დამოკიდებულია მომხმარებლის კავშირზე. გადართვის დროს მომხმარებლის გამოცდილების გასაუმჯობესებლად შეგიძლიათ აჩვენოთ დატვირთვის ინდიკატორი, რომელიც უზრუნველყოფს ვიზუალურ გამოხმაურებას.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

მრავლობითი ფორმები

მრავლობითობის მართვა და რაოდენობაზე დაფუძნებული ეტიკეტების სხვადასხვა ენებზე სწორად ჩვენება ითვლება საუკეთესო პრაქტიკად:

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

მრავალენოვანი

ერთსა და იმავე აპლიკაციაში რამდენიმე ენის ერთდროული მხარდაჭერისთვის, შეგიძლიათ გამოიყენოთ რამდენიმე TacoTranslate პროვაიდერი სხვადასხვა locale მნიშვნელობებით, როგორც ქვემოთ ნაჩვენებია:

შეგიძლიათ ასევე გადააწეროთ locale კომპონენტის ან hook-ის დონეზე.

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

თარგმნის ID-ების გამოყენება

თქვენ შეგიძლიათ დაამატონ id Translate კომპონენტს, რათა მოაგვაროთ ერთი და იგივე სტრიქონის სხვადასხვა თარგმანები ან მნიშვნელობები. ეს განსაკუთრებით სასარგებლოა, როცა ერთი და იგივე ტექსტი კონტექსტის მიხედვით საჭიროებს სხვადასხვა თარგმანს. უნიკალური ID-ების მიცემით, თქვენ უზრუნველყოფთ, რომ სტრიქონის თითოეული შემთხვევა მისი კონკრეტული მნიშვნელობის შესაბამისად სწორად გადაითარგმნება.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

მაგალითად, ჰედერში არსებული 'login' შეიძლება ითარგმნოს როგორც “Iniciar sesión”, ხოლო ფუტერში არსებული 'login' შეიძლება ითარგმნოს როგორც “Acceder” ესპანურად.

საუკეთესო პრაქტიკები