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

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