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