استفاده پیشرفته
کار با زبانهای راستبهچپ
TacoTranslate پشتیبانی از زبانهای راستبهچپ (RTL)، مانند عربی و عبری، را در برنامههای React شما آسان میکند. برخورد صحیح با زبانهای راستبهچپ تضمین میکند که محتوای شما برای کاربرانی که از راست به چپ میخوانند بهدرستی نمایش داده شود.
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
در برنامهی خود استفاده کنید. این کار برای سازماندهی ترجمهها و رشتههای شما در منابع مختلف مفید است، مانند سربرگ، فوتر یا بخشهای خاص.
میتوانید بیشتر دربارهٔ استفاده از origins بخوانید.
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
ارائهدهنده، میتوانید هر دو origin و locale را در سطح مؤلفه 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
);
}
قواعد جمع
برای مدیریت قواعد جمع (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)}}
/>
);
}
چندین زبان
برای پشتیبانی همزمان از چند زبان در همان برنامه، میتوانید از چندین ارائهدهندهٔ TacoTranslate استفاده کنید با مقادیر locale
مختلف همانطور که در زیر نشان داده شده است:
همچنین میتوانید 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
اضافه کنید تا ترجمهها یا معانی مختلف برای همان رشته را مدیریت کند. این کار بهویژه زمانی مفید است که همان متن براساس زمینه به ترجمههای متفاوتی نیاز داشته باشد. با اختصاص شناسههای یکتا، اطمینان حاصل میکنید که هر نمونه از آن رشته بهصورت دقیق و مطابق با معنای خاص خود ترجمه میشود.
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” به زبان اسپانیایی ترجمه شود.