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

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

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

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