Ахисан түвшний хэрэглээ
Баруунаас зүүн тийш бичигддэг хэлүүдийг удирдах
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-ийн түвшинд эх сурвалж, мөн орон нутгийг давхар өөрчилж болох юм.
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" />
);
}
Жишээ нь, толгойн хэсгийн нэвтрэлт нь испани хэл дээр “Iniciar sesión” гэж орчуулагдаж болох бөгөөд хөлийн хэсгийн нэвтрэлт нь “Acceder” гэж орчуулагдаж болно.