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

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

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';
	// ...
}

تعطيل الترجمة

لإيقاف الترجمة لأجزاء محددة من النص أو لضمان الحفاظ على بعض المقاطع كما هي، يمكنك استخدام الأقواس المربعة الثلاثية triple square brackets. هذه الميزة مفيدة للحفاظ على التنسيق الأصلي للأسماء أو المصطلحات التقنية أو أي محتوى آخر لا ينبغي ترجمته.

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

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