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

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

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

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