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