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

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

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

برای رسیدن به این هدف، استفاده از چندین ارائه‌دهنده 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