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}
/>
);
}উপরের উদাহরণটি সাধারণ পাঠ্য হিসেবে প্রদর্শিত হবে।