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

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