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