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