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

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