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

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

استفاده از مبدأها

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

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