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

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

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