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