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

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

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, می‌توانید هم مبدا و هم محلی (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» ترجمه شود.

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