Баримтжуулалт: Ахисан түвшний хэрэглээ

Ахисан түвшний хэрэглээ

Mongolian

Баруунаас зүүн рүү бичигддэг хэлүүдтэй ажиллах

TacoTranslate нь таны React програмуудад араб, иврит зэрэг баруунаас зүүн тийш уншигддаг (RTL) хэлүүдийг дэмжихийг хялбар болгодог. 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-ийн түвшинд эх сурвалж (origin) болон локаль (locale)-ыг хоёуланг нь давхарлан өөрчилж болно.

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-үүдийг ашиглах

Та Translate бүрэлдэхүүнд id нэмэх замаар ижил мөрийн өөр өөр орчуулга эсвэл утгыг удирдаж болно. Энэ нь ижил текст контекстаас хамааран өөрөөр орчуулагдах шаардлагатай үед онцгой хэрэгтэй. Өвөрмөц 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” гэж орчуулагдаж болно.

Шилдэг туршлагууд