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

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

Dari

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

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

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