દસ્તાવેજીકરણ: TacoTranslate નો ઉપયોગ

TacoTranslate નો ઉપયોગ

Gujarati

સ્ટ્રિંગ્સનું અનુવાદ

સ્ટ્રિંગ્સને અનુવાદ કરવા માટે હાલમાં ત્રણ રીતો છે: 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 પ્રદાતાઓનો ઉપયોગ કરવા પર વિચાર કરો.

કૃપા કરીને નોંધો કે એ જ સ્ટ્રિંગને અલગ-અલગ ઓરિજિન્સમાં અલગ અનુવાદ મળી શકે છે.

અંતે, તમે સ્ટ્રિંગ્સને ઓરિજિન્સમાં કેવી રીતે વહોચો તે તમારા અને તમારી જરૂરિયાતો પર નિર્ભર છે. છતાં, નોંધો કે એક જ ઓરિજિનમાં ઘણી સ્ટ્રિંગ્સ હોવાને કારણે લોડિંગ સમય વધી શકે છે.

વેરિયેબલ્સનું સંચાલન

ડાયનેમિક સામગ્રી માટે હંમેશા વેરિયેબલ્સનો ઉપયોગ કરો, જેમ કે વપરાશકર્તા નામો, તારીખો, ઈમેલ સરનામાઓ અને વધુ.

સ્ટ્રિંગોમાં વેરિયેબલ્સને ડબલ બ્રેકેટનો ઉપયોગ કરીને ઘોષિત કરવામાં આવે છે, જેમ કે {{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}
		/>
	);
}

ઉપરોક્ત ઉદાહરણ સાદા ટેક્સ્ટ તરીકે રજૂ થશે.

સર્વર-સાઇડ રેન્ડરિંગ