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

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

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

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