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

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

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';
	// ...
}

Орчуулгыг идэвхгүй болгох

Мөрийн тодорхой хэсгүүдийн орчуулалтыг идэвхгүй болгох эсвэл зарим сегментүүдийг яг хэвээр нь хадгалахын тулд та triple square brackets ашиглаж болно. Энэхүү функц нь нэр, техникийн нэр томъёо болон орчуулах ёсгүй бусад аливаа агуулгыг анхных шиг нь хадгалахад ашигтай.

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 хукын түвшинд 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
	);
}

Олон тооны хэлбэр

Олон тоог илэрхийлэх хэлбэр (pluralization) болон тоон суурьтай шошгуудыг хэл бүрт зөв харуулахын тулд үүнийг хамгийн сайн дадал гэж үздэг:

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

Та ижил мөрний хувьд өөр орчуулга эсвэл утгыг зохицуулахын тулд Translate компонентэд id нэмэж болно. Ижил текст нь контекстаас хамааран өөр өөр орчуулга шаарддаг үед энэ нь онцгой хэрэгтэй. Өвөрмөц ID-үүдийг оноосноор тухайн мөрийн төрөл бүрийн тохиолдлыг тус тусын утгад нийцүүлэн нарийн орчуулагдахыг баталгаажуулна.

import {Translate} from 'tacotranslate/react';

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

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

Жишээлбэл, дээд хэсгийн 'login' испани хэлэнд “Iniciar sesión” гэж орчуулагдаж болох ба доод хэсгийн 'login' испани хэлэнд “Acceder” гэж орчуулагдаж болно.

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