مستندات: استفاده از 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 دیگر برای صفحه بازاریابی خود داشته باشید.

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