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

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

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';
	// ...
}

غیرفعال کردن ترجمه

برای غیرفعال کردن ترجمه برای بخش‌های خاصی از یک رشته یا برای اطمینان از اینکه بخش‌های مشخصی به همان صورت حفظ شوند، می‌توانید از triple square brackets استفاده کنید. این ویژگی برای حفظ قالب اصلی نام‌ها، اصطلاحات فنی، یا هر محتوای دیگری که نباید ترجمه شود، مفید است.

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

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