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 সেট আপ করতে পারেন।
এটি অর্জনের জন্য, আপনার প্রকল্পের মধ্যে একাধিক 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}
/>
);
}উপরের উদাহরণটি সরল পাঠ্য হিসাবে প্রদর্শিত হবে।