Баримт бичиг: Дэвшилтэт хэрэглээ

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

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

Та эх сурвалжийг ашиглах талаар дэлгэрэнгүйг эндээс уншиж болно.

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

Та 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” болж орчуулагдаж болно.

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