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

Дэвшилтэт ашиглалт

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 хаяг уровня дээр өөрчлөх боломжтой.

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

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

import {Translate} from 'tacotranslate/react';

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

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

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

Хамгийн сайн туршлагууд