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

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

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

Ачааллыг удирдах

Клиент тал дээр хэл солих үед орчуулгыг татахад хэрэглэгчийн холболтоос хамаарч хэдэн мөч шаардагдаж болно. Солих явцад визуаль хариулт өгч хэрэглэгчийн туршлагыг сайжруулахын тулд ачаалж буйг заах заагчийг (loading indicator) харуулж болно.

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

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