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

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

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

می‌توانید اطلاعات بیشتری دربارهٔ نحوهٔ استفاده از 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، می‌توانید هر دو مقدار 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
	);
}

جمع‌سازی

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

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

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