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)
};
}স্ট্রিংগুলি কিভাবে অনুবাদ করা হয়
যখন স্ট্রিংগুলি আমাদের সার্ভারে পৌঁছায়, আমরা প্রথমে সেগুলো যাচাই ও সংরক্ষণ করি, তারপর সঙ্গে সঙ্গে একটি মেশিন অনুবাদ প্রদান করি। যদিও মেশিন অনুবাদ সাধারণত আমাদের AI অনুবাদের তুলনায় কম মানের হয়, তবুও এটি দ্রুত একটি প্রাথমিক প্রতিক্রিয়া প্রদান করে।
একই সাথে, আমরা একটি অ্যাসিঙ্ক্রোনাস অনুবাদ কাজ শুরু করি আপনার স্ট্রিং-এর জন্য একটি উচ্চ মানের, সর্বাধুনিক AI অনুবাদ তৈরি করতে। যখন AI অনুবাদ প্রস্তুত হবে, তখন এটি মেশিন অনুবাদকে প্রতিস্থাপন করবে এবং আপনার স্ট্রিং-এর অনুবাদ অনুরোধ করার সময় পাঠানো হবে।
যদি আপনি কোনো স্ট্রিং ম্যানুয়ালি অনুবাদ করে থাকেন, তাহলে সেই অনুবাদগুলো অগ্রাধিকার পাবে এবং সেগুলোই ফেরত দেওয়া হবে।
উৎপত্তি ব্যবহার করা
TacoTranslate প্রকল্পগুলিতে এমন কিছু থাকে যাদের আমরা origins বলি। এগুলিকে আপনার স্ট্রিং এবং অনুবাদের জন্য এন্ট্রি পয়েন্ট, ফোল্ডার, বা গ্রুপ হিসেবে ভাবুন।
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}Origins আপনাকে স্ট্রিংগুলো অর্থবহ কন্টেইনারে আলাদা করতে দেয়। উদাহরণস্বরূপ, আপনার কাছে একটি origin থাকতে পারে ডকুমেন্টেশনের জন্য এবং আরেকটি থাকতে পারে আপনার মার্কেটিং পৃষ্ঠার জন্য।
আরও সূক্ষ্ম নিয়ন্ত্রণের জন্য, আপনি কম্পোনেন্ট স্তরে origins সেট আপ করতে পারেন।
এটি অর্জনের জন্য, আপনার প্রকল্পের মধ্যে একাধিক TacoTranslate প্রদানকারী ব্যবহারের কথা বিবেচনা করুন.
অনুগ্রহ করে মনোযোগ দিন যে একই স্ট্রিং বিভিন্ন উৎসে ভিন্ন অনুবাদ পেতে পারে।
অবশেষে, আপনি কীভাবে স্ট্রিংগুলোকে origins-এ বিভক্ত করবেন তা আপনার এবং আপনার প্রয়োজনের উপর নির্ভর করে। তবে, মনে রাখবেন যে একটি origin-এ অনেক স্ট্রিং থাকার কারণে লোডিং সময় বাড়তে পারে।
ভেরিয়েবলগুলি পরিচালনা করা
আপনাকে সব সময় ডাইনামিক কন্টেন্টের জন্য ভেরিয়েবল ব্যবহার করতে হবে, যেমন ব্যবহারকারীর নাম, তারিখ, ইমেইল ঠিকানা, এবং আরও অনেক কিছু।
স্ট্রিংগুলিতে ভেরিয়েবলগুলি ডাবল ব্র্যাকেট ব্যবহার করে ঘোষণা করা হয়, যেমন {{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}
/>
);
}উপরের উদাহরণটি সাধারণ টেক্সট হিসেবে প্রদর্শিত হবে।