TacoTranslate භාවිතා කිරීම
පෙළ පරිවර්තනය
පෙළ පරිවර්තනය කිරීමට දැනට ක්රම තුනක් ඇත: Translate
කොම්පොනන්ට්, useTranslation
හූක්, හෝ translateEntries
යුටිලිටි.
Translate
සංරචකය භාවිතා කිරීම.
පරිවර්තන span
අංගය තුළ ප්රදර්ශනය කරයි, සහ HTML රෙන්ඩර කිරීම සඳහා සහය දක්වයි.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
ඔබට උදාහරණයක් ලෙස කොම්පෝනන්ට් එකේ as="p"
භාවිතයෙන් මූලද්රව්ය වර්ගය වෙනස් කළ හැක.
useTranslation
hook භාවිතා කිරීම.
පරිවර්තන සාමාන්ය පෙළක් ලෙස ලබා දේ. උදාහරණයක් ලෙස, 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 සැපයුම්කරුවන් භාවිතා කිරීම ඔබේ ව්යාපෘතිය තුළ සලකා බලන්න.
කරුණාකර සලකන්න: එකම පෙළ විවිධ මූලාශ්රවලදී විවිධ පරිවර්තන ලබාගත හැකි බව.
අවසානයේ, ඔබ පෙළ මූලාශ්රවලට කෙසේ වෙන් කරන්නේද යන්න ඔබගේ කැමැත්තට සහ අවශ්යතාවයන්ට අදාළ වේ. කෙසේවෙතත්, එකම මූලාශ්රයක බොහෝ පෙළයන් තිබීමෙන් ලෝඩ් වීමේ කාලය වැඩි විය හැක.
වෙනස්කම් හසුරවීම
පරිශීලක නාම, දිනයන්, ඊ-තැපැල් ලිපින ආදී ගතික අන්තර්ගත සඳහා ඔබ සෑමවිටම විචල්ය භාවිතා කළ යුතුය.
පෙළවල වෙනස්කම් (variables) දෙවරක් වටකර ඇති කොටු භාවිතයෙන් ප්රකාශ කරයි, උදාහරණයක් ලෙස {{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}
/>
);
}
ඉහත උදාහරණය සාමාන්ය පෙළක් ලෙස පෙන්වනු ලැබේ.