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

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

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

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