مستندات: استفاده از 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 به شما اجازه می‌دهد رشته‌ها را در کانتینرهای معنادار جدا کنید. برای مثال، می‌توانید یک origin برای مستندات و یک origin دیگر برای صفحه بازاریابی خود داشته باشید.

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

برای دستیابی به این هدف، در پروژهٔ خود استفاده از چندین ارائه‌دهندهٔ TacoTranslate را در نظر بگیرید.

لطفاً توجه داشته باشید که همان رشته ممکن است در مبدأهای مختلف ترجمه‌های متفاوتی داشته باشد.

در نهایت، نحوهٔ جدا کردن رشته‌ها به originها به شما و نیازهایتان بستگی دارد. با این حال، توجه داشته باشید که وجود رشته‌های زیاد در یک origin ممکن است زمان بارگذاری را افزایش دهد.

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

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

متغیرها در رشته‌ها با استفاده از آکولادهای دوبل اعلام می‌شوند، مانند {{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