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

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

برای کنترل دقیق‌تر، می‌توانید منشأها را در سطح مولفه تنظیم کنید.

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