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';
	// ...
}

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

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

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

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

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

პროდუქტი Nattskiftet-სგან