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

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

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

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