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