التوثيق: استخدام 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