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

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

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 المتعددين، يمكنك أيضًا تجاوز كل من الأصل وlocale على مستويات مكون 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” بالإسبانية.

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