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

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

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

Та мөн одоогийн хэлийг React -аас гадна шалгахын тулд олгосон isRightToLeftLocaleCode функцийг ашиглаж болно.

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

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

Хэрэглэгчийн холболтоос хамааран клиент талд хэл солих үед орчуулга татахад хэдэн секунд шаардлагатай байж болно. Солилтын явцад хэрэглэгчийн туршлагыг сайжруулахын тулд ачаалах заагчийг харуулж, харааны сануулга өгч болно.

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 функцийг компонент эсвэл хукын түвшинд давхардуулан тохируулж болно.

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

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

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