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

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

Dari

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

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

بازنویسی مبدأ یا تنظیمات محلی

علاوه بر استفاده از چندین ارائه‌دهندهٔ 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” به زبان اسپانیایی ترجمه شود.

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