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

استخدام TacoTranslate

Arabic

ترجمة السلاسل

هناك حاليًا ثلاث طرق لترجمة السلاسل: المكوّن Translate, الهوك useTranslation, أو الأداة translateEntries.

استخدام المكوّن Translate.
يعرض الترجمات داخل عنصر span، ويدعم عرض HTML.

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

يمكنك تغيير نوع العنصر على المكوّن، على سبيل المثال باستخدام as="p".

استخدام هوك useTranslation.
يعيد الترجمات كسلسلة نصية عادية. مفيد، على سبيل المثال، في وسوم meta.

import {useEffect} from 'react';
import {useTranslation} from 'tacotranslate/react';

function Page() {
	const helloWorld = useTranslation('Hello, world!');

	useEffect(() => {
		alert(helloWorld);
	}, [helloWorld]);

	return (
		<title>{useTranslation('My page title')}</title>
	);
}

باستخدام أداة translateEntries.
ترجم السلاسل النصية على جانب الخادم. عزّز صور OpenGraph الخاصة بك.

import {createEntry, translateEntries} from 'tacotranslate';

async function generateMetadata(locale = 'es') {
	const title = createEntry({string: 'Hello, world!'});
	const description = createEntry({string: 'TacoTranslate on the server'});

	const translations = await translateEntries(
		tacoTranslate,
		{origin: 'opengraph', locale},
		[title, description]
	);

	return {
		title: translations(title),
		description: translations(description)
	};
}

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

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

إذا قمت بترجمة سلسلة يدويًا، فستأخذ تلك الترجمات الأولوية وسيتم إرجاعها بدلاً من غيرها.

استخدام الأصول

تحتوي مشاريع TacoTranslate على ما نُسميه الأصول. فكر فيها كنقاط دخول أو مجلدات أو مجموعات للنصوص والترجمات الخاصة بك.

import {TacoTranslate} from 'tacotranslate/react';

function Menu() {
	return (
		<TacoTranslate origin="application-menu">
			// ...
		</TacoTranslate>
	);
}

تتيح الأصول فصل النصوص إلى حاويات ذات معنى. على سبيل المثال، قد يكون لديك أصل واحد للتوثيق وآخر لصفحة التسويق الخاصة بك.

لتحكّم أكثر تفصيلاً، يمكنك إعداد الأصول على مستوى المكوّن.

لتحقيق ذلك، ضع في اعتبارك استخدام عدة مزودي TacoTranslate ضمن مشروعك.

يرجى ملاحظة أن نفس السلسلة قد تتلقى ترجمات مختلفة في أصول مختلفة.

في النهاية، كيفية تقسيم السلاسل إلى أصول يعود إليك وإلى احتياجاتك. ومع ذلك، لاحظ أن وجود العديد من السلاسل داخل أصل واحد قد يزيد من أوقات التحميل.

التعامل مع المتغيرات

يجب عليك دائمًا استخدام المتغيرات للمحتوى الديناميكي، مثل أسماء المستخدمين، التواريخ، عناوين البريد الإلكتروني، والمزيد.

تُعلن المتغيرات في السلاسل باستخدام قوسين مزدوجين، مثل {{variable}}.

import {Translate} from 'tacotranslate/react';

function Greeting() {
	const name = 'Juan';
	return <Translate string="Hello, {{name}}!" variables={{name}} />;
}

import {useTranslation} from 'tacotranslate/react';

function useGreeting() {
	const name = 'Juan';
	return useTranslation('Hello, {{name}}!', {variables: {name}});
}

إدارة محتوى HTML

بشكل افتراضي، يدعم مكوّن Translate ويعرض محتوى HTML. ومع ذلك، يمكنك إلغاء هذا السلوك عن طريق ضبط useDangerouslySetInnerHTML على false.

يُنصح بشدة بتعطيل عرض HTML عند ترجمة محتوى غير موثوق به، مثل المحتوى الذي ينشئه المستخدمون.

يتم دائمًا تنقية جميع المخرجات باستخدام sanitize-html قبل عرضها.

import {Translate} from 'tacotranslate/react';

function Page() {
	return (
		<Translate
			string={`
				Welcome to <strong>my</strong> website.
				I’m using <a href="{{url}}">TacoTranslate</a> to translate text.
			`}
			variables={{url: 'https://tacotranslate.com'}}
			useDangerouslySetInnerHTML={false}
		/>
	);
}

سيتم عرض المثال أعلاه كنص عادي.

العرض من جانب الخادم

استخدام TacoTranslate

كيف تتم ترجمة السلاسل النصية

استخدام الأصول

التعامل مع المتغيرات

إدارة محتوى HTML