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

Дэвшилтэт хэрэглээ

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

Эх үүсвэр (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” гэж орчуулагдаж магадгүй.

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