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

استخدام TacoTranslate

Arabic

ترجمة السلاسل النصية

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

استخدام مكون Translate.
يعرض الترجمات داخل عنصر span, ويدعم عرض محتوى HTML.

import {Translate} from 'tacotranslate/react';

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

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

استخدام الـ useTranslation hook.
يرجع الترجمات كسلسلة نصية عادية. مفيد في، على سبيل المثال، علامات 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>
	);
}

تتيح لك الأصول فصل النصوص إلى حاويات ذات معنى. على سبيل المثال، يمكنك أن يكون لديك أصل واحد للوثائق وآخر لصفحة التسويق الخاصة بك.

للحصول على تحكم أكثر دقة، يمكنك إعداد origins على مستوى المكون.

لتحقيق ذلك، ضع في اعتبارك استخدام عدة مزودين 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