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

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

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 پروایدر استفاده کنید. این برای سازمان‌دهی ترجمه‌ها و رشته‌های شما در منابع مختلف مفید است، مانند سربرگ، فوتر، یا بخش‌های خاص.

می‌توانید برای کسب اطلاعات بیشتر دربارهٔ استفاده از مبدأها اینجا بخوانید.

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” ترجمه شود.

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