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