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

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

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

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