مستندات: استفاده از 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)
	};
}

وقتی رشته‌ها به سرورهای ما می‌رسند، ابتدا آنها را اعتبارسنجی و ذخیره می‌کنیم، سپس بلافاصله یک ترجمه ماشینی بازمی‌گردانیم. در حالی که ترجمه‌های ماشینی عموماً کیفیت کمتری نسبت به ترجمه‌های هوش مصنوعی ما دارند، اما پاسخ اولیه سریعی ارائه می‌دهند.

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

اگر شما یک رشته را به صورت دستی ترجمه کرده باشید، آن ترجمه‌ها اولویت دارند و به جای آن‌ها بازگردانده می‌شوند.

استفاده از origins

پروژه‌های TacoTranslate شامل چیزی هستند که ما آن را origins می‌نامیم. آن‌ها را به‌عنوان نقاط ورودی، پوشه‌ها یا گروه‌هایی برای رشته‌ها و ترجمه‌های شما در نظر بگیرید.

import {TacoTranslate} from 'tacotranslate/react';

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

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

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

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

چگونه رشته‌ها ترجمه می‌شوند

استفاده از origins

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

مدیریت محتوای HTML