مستندات: استفاده پیشرفته

استفاده پیشرفته

Dari

رسیدگی به زبان‌های راست‌به‌چپ

TacoTranslate پشتیبانی از زبان‌های راست به چپ (RTL)، مانند عربی و عبری، را در برنامه‌های React شما آسان می‌کند. مدیریت صحیح زبان‌های 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 را در سطح مؤلفه یا هوک بازنویسی کنید.

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» به زبان اسپانیایی ترجمه شود.

بهترین روش‌ها