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