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