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

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

برای کنترل دقیق‌تر، می‌توانید 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