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

import {TacoTranslate} from 'tacotranslate/react';

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

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

برای کنترل دقیق‌تر، می‌توانید 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