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>
);
}
ઓરિજિન્સ તમને 문자열ોને અર્થપૂર્ણ કન્ટેનરમાં વિભાજિત કરવાની મંજૂરી આપે છે. ઉદાહરણ તરીકે, તમારી પાસે એક ઓરિજિન દસ્તાવેજીકરણ માટે અને બીજું તમારા માર્કેટિંગ પૃષ્ઠ માટે હોઈ શકે છે.
વધુ સૂક્ષ્મ નિયંત્રણ માટે, તમે કંપોનન્ટ સ્તરે મૂળ સ્થાપિત કરી શકો છો.
આને પ્રાપ્ત કરવા માટે, તમારા પ્રોજેક્ટમાં એકથી વધુ 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}
/>
);
}
ઉપરનો ઉદાહરણ સાદા ટેક્સ્ટ તરીકે રેન્ડર થશે.