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

استفاده از TacoTranslate

Farsi (Persian)

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

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

import {TacoTranslate} from 'tacotranslate/react';

function Menu() {
	return (
		<TacoTranslate origin="application-menu">
			// ...
		</TacoTranslate>
	);
}

اصول به شما اجازه می‌دهند رشته‌ها را در محفظه‌های معنادار جدا کنید. برای مثال، می‌توانید یک اصل برای مستندات و دیگری برای صفحه بازاریابی خود داشته باشید.

برای کنترل دقیق‌تر، می‌توانید ریشه‌ها را در سطح کامپوننت تنظیم کنید.

برای رسیدن به این هدف، استفاده از چندین ارائه‌دهنده TacoTranslate در پروژه خود را در نظر بگیرید.

لطفاً توجه داشته باشید که یک رشته ممکن است در منابع مختلف ترجمه‌های متفاوتی دریافت کند.

در نهایت، نحوه‌ی جدا کردن رشته‌ها به origins بستگی به شما و نیازهای شما دارد. با این حال، توجه داشته باشید که داشتن رشته‌های زیاد در یک origin ممکن است زمان بارگذاری را افزایش دهد.

مدیریت متغیرها

شما باید همیشه برای محتویات پویا، مانند نام‌های کاربری، تاریخ‌ها، آدرس‌های ایمیل و موارد دیگر، از متغیرها استفاده کنید.

متغیرها در رشته‌ها با استفاده از دو براکت اعلام می‌شوند، مانند {{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