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

استخدام TacoTranslate

Arabic

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

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

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

import {Translate} from 'tacotranslate/react';

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

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

استخدام الـ hook 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