استفاده از TacoTranslate
ترجمه رشتهها
در حال حاضر سه روش برای ترجمهٔ رشتهها وجود دارد: کامپوننت 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 به شما اجازه میدهند رشتهها را در گروههایی معنادار جدا کنید. برای مثال، میتوانید یک منبع برای مستندات و یک منبع دیگر برای صفحه بازاریابی خود داشته باشید.
برای کنترل دقیقتر، میتوانید 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}
/>
);
}مثال بالا بهصورت متن ساده نمایش داده خواهد شد.