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 প্রকল্পগুলিতে আমরা যাকে উত্স বলি তা থাকে। এগুলোকে আপনার স্ট্রিং এবং অনুবাদগুলির জন্য এন্ট্রি পয়েন্ট, ফোল্ডার বা গ্রুপ হিসেবে ভাবতে পারেন।
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}
/>
);
}উপরের উদাহরণটি সাধারণ টেক্সট হিসেবে রেন্ডার করা হবে।