التوثيق: الاستخدام المتقدم

الاستخدام المتقدم

Arabic

التعامل مع اللغات من اليمين إلى اليسار

يسهل 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” بالإسبانية.

أفضل الممارسات