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

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

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

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

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

Эх үүсвэр (origin) эсвэл локал (locale)-ыг давхарлан тохируулах

Олон TacoTranslate провайдер ашиглахын зэрэгцээ, та Translate компонент болон useTranslation хукын түвшинд эх сурвалж болон локалийг хоёуланг нь давхарлан өөрчилж болно.

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

Олон хэл

Нэг аппликейшн дотор зэрэг олон хэлийг дэмжихийн тулд та доорх жишээнд үзүүлсэнчлэн өөр өөр locale утгатай олон TacoTranslate провайдер ашиглаж болно:

Мөн та 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” гэж орчуулагдаж магадгүй.

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