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

import {TacoTranslate} from 'tacotranslate/react';

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

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

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