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

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

Arabic

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

تجعل 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 على مستوى المكوّن أو الـ hook.

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

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