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

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

Farsi (Persian)

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

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, می‌توانید هر دو مبدأ و زبان محلی را در سطح کامپوننت 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” به زبان اسپانیایی ترجمه شود.

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