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