TacoTranslate
/
HujjatlarNarxlar
 
  1. Kirish
  2. Boshlash
  3. Sozlash va konfiguratsiya
  4. TacoTranslate'dan foydalanish
  5. Server tomonida renderlash
  6. Kengaytirilgan foydalanish
  7. Eng yaxshi amaliyotlar
  8. Xatolarni boshqarish va nosozliklarni tuzatish
  9. Qo'llab-quvvatlanadigan tillar

Kengaytirilgan foydalanish

Oʻngdan chapga yoziladigan tillarni boshqarish

TacoTranslate sizning React ilovalaringizda arab va ivrit kabi o‘ngdan chapga o‘qiladigan (RTL) tillarni qo‘llab-quvvatlashni osonlashtiradi. RTL tillarni to‘g‘ri boshqarish kontentingizni o‘ngdan chapga o‘qiydigan foydalanuvchilar uchun to‘g‘ri ko‘rsatilishini ta’minlaydi.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Shuningdek, taqdim etilgan isRightToLeftLocaleCode funksiyasidan foydalanib, joriy tilni React tashqarisida tekshirishingiz mumkin.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Tarjimani o‘chirish

Matnning maʼlum qismlarini tarjima qilinmasligini yoki baʼzi segmentlarning aynan shunday saqlanishini taʼminlash uchun uchta kvadrat qavsdan foydalanishingiz mumkin. Bu funksiya ism, texnik atamalar yoki boshqa tarjima qilinmasligi kerak bo‘lgan kontentlarning asl formatini saqlash uchun foydalidir.

import {Translate} from 'tacotranslate/react';

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

Ushbu misolda, “TacoTranslate” so'zi tarjimada o'zgarmas holda qoladi.

TacoTranslate uchun bir nechta provayderlar

Ilovangizda bir nechta TacoTranslate provayderlaridan foydalanishni qat'iyan tavsiya qilamiz. Bu tarjima va satrlaringizni sarlavha, pastki qism yoki ma'lum bo'limlar kabi turli manbalarga ajratib tartibga solish uchun foydalidir.

Siz originlardan foydalanish haqida ko'proq ma'lumotni bu yerdan o'qishingiz mumkin.

TacoTranslate provayderlari har qanday ota-provayderdan sozlamalarni meros qilib oladi, shuning uchun boshqa sozlamalarni takrorlashga hojat yo‘q.

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

Manba yoki lokalni qayta belgilash

Bir nechta TacoTranslate provayderlaridan foydalanishga qo'shimcha ravishda, siz Translate komponenti va useTranslation hook darajalarida origin va locale sozlamalarini ham o'zgartirishingiz mumkin.

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

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

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

Yuklanishni boshqarish

Mijoz tomonida tilni o‘zgartirganda, tarjimalarni olish foydalanuvchining tarmoq ulanishiga qarab biroz vaqt olishi mumkin. O‘zgartirish jarayonida foydalanuvchiga vizual bildirish berish orqali tajribani yaxshilash uchun yuklanish indikatorini ko‘rsatishingiz mumkin.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Ko‘plik

Ko‘plik shakllarini boshqarish va turli tillarda son asosidagi yorliqlarni to‘g‘ri ko‘rsatish uchun buni eng yaxshi amaliyot deb hisoblashadi:

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 nechta tillar

Bir ilovada bir nechta tillarni bir vaqtning o‘zida qo‘llab‑quvvatlash uchun, siz quyida ko‘rsatilganidek turli locale qiymatlar bilan bir nechta TacoTranslate provayderlaridan foydalanishingiz mumkin:

Shuningdek, localeni komponent yoki hook darajasida o'zgartirishingiz mumkin.

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

Tarjima identifikatorlaridan foydalanish

Siz id ni Translate komponentiga qo'shib, bir xil satr uchun turli tarjimalar yoki ma'nolarni boshqarishingiz mumkin. Bu ayniqsa bir xil matn kontekstga qarab turli tarjimalar talab etilganda foydalidir. Noyob ID'larni belgilash orqali satrning har bir nusxasi o'ziga xos ma'nosiga mos ravishda aniq tarjima qilinishini ta'minlaysiz.

import {Translate} from 'tacotranslate/react';

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

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

Masalan, sarlavhadagi login ispan tilida “Iniciar sesión”, footerdagi login esa “Acceder” deb tarjima qilinishi mumkin.

Eng yaxshi amaliyotlar

Nattskiftet tomonidan yaratilgan mahsulotNorvegiyada ishlab chiqarilgan