TacoTranslate
/
დოკუმენტაციაფასები
 
  1. შესავალი
  2. დაწყება
  3. დაყენება და კონფიგურაცია
  4. TacoTranslate-ის გამოყენება
  5. სერვერული მხარის რენდერინგი
  6. მოწინავე გამოყენება
  7. საუკეთესო პრაქტიკები
  8. შეცდომების მართვა და დებაგინგი
  9. მხარდაჭერილი ენები

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

მარჯვენიდან-მარცხნივ მიმართული ენების მხარდაჭერა

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 პროვაიდერის გამოყენებას. ეს სასარგებლოა თქვენი თარგმანებისა და სტრიქონების ორგანიზებისთვის სხვადასხვა ორიგინებში, როგორიცაა თქვენი ჰედერი, ფუტერი ან კონკრეტული განყოფილებები.

თქვენ შეგიძლიათ აქ გაეცნოთ origin-ების გამოყენების შესახებ დამატებით ინფორმაციას.

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 პროვაიდერის გამოყენების გარდა, თქვენ ასევე შეგიძლიათ გადაწეროთ როგორც წყარო, ასევე ლოკალი Translate კომპონენტსა და useTranslation hook-ის დონეზე.

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

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

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

Nattskiftet-ის პროდუქტინორვეგიაში წარმოებული