مستندات: استفاده از TacoTranslate

استفاده از TacoTranslate

Dari

ترجمه کردن رشته‌ها

در حال حاضر سه روش برای ترجمه رشته‌ها وجود دارد: کامپوننت 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 شامل چیزی است که ما آن را origine می‌نامیم. آن‌ها را به عنوان نقاط ورودی، پوشه‌ها، یا گروه‌هایی برای رشته‌ها و ترجمه‌های خود در نظر بگیرید.

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