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

import {TacoTranslate} from 'tacotranslate/react';

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

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

برای کنترل دقیق‌تر، می‌توانید روی سطح کامپوننت منابع (origins) را تنظیم کنید.

برای رسیدن به این هدف، استفاده از چندین ارائه‌دهنده 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