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 আপনাকে স্ট্রিংগুলোকে অর্থবহ কন্টেইনারে আলাদা করতে দেয়। উদাহরণস্বরূপ, আপনার একটি origins থাকতে পারে ডকুমেন্টেশনের জন্য এবং অন্যটি আপনার মার্কেটিং পেজের জন্য।
আরও সূক্ষ্ম নিয়ন্ত্রণের জন্য, আপনি কম্পোনেন্ট স্তরে origins সেটআপ করতে পারেন।
এটি অর্জন করার জন্য, আপনার প্রকল্পের মধ্যে একাধিক TacoTranslate প্রদানকারী ব্যবহার করার কথা ভাবুন।
দয়া করে লক্ষ্য করুন যে একই স্ট্রিং বিভিন্ন origins-এ ভিন্ন অনুবাদ পেতে পারে।
অবশেষে, আপনি কিভাবে স্ট্রিংগুলোকে অরিজিনে ভাগ করবেন তা আপনার উপরে এবং আপনার প্রয়োজনের উপর নির্ভর করে। তবে, লক্ষ্য করুন যে একটি অরিজিনের মধ্যে অনেক স্ট্রিং থাকলে লোডিং সময় বৃদ্ধি পেতে পারে।
ভেরিয়েবলগুলি পরিচালনা করা
আপনাকে সর্বদা ডাইনামিক কন্টেন্টের জন্য ভেরিয়েবল ব্যবহার করা উচিত, যেমন ব্যবহারকারীর নাম, তারিখ, ই-মেইল ঠিকানা, এবং আরও অনেক কিছু।
স্ট্রিংগুলিতে ভেরিয়েবলগুলি ডাবল ব্র্যাকেট ব্যবহার করে ঘোষণা করা হয়, যেমন {{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}
/>
);
}উপরের উদাহরণটি সাধারণ টেক্সট হিসাবে রেন্ডার হবে।