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