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

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

Farsi (Persian)

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

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, می‌توانید هر دو مبدأ (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
	);
}

جمع‌سازی

برای مدیریت حالاتِ جمع و نمایشِ صحیحِ برچسب‌های مبتنی بر شمار در زبان‌های مختلف، این روش بهترین شیوه محسوب می‌شود:

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

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