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