દસ્તાવેજીકરણ: 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 પ્રોજેક્ટોમાં એવી વસ્તુઓ હોય છે જેને આપણે origins કહીએ છીએ. તેમને તમારા સ્ટ્રિંગ્સ અને અનુવાદો માટે પ્રવેશ બિંદુઓ, ફોલ્ડરો અથવા જૂથો તરીકે વિચારો.

import {TacoTranslate} from 'tacotranslate/react';

function Menu() {
	return (
		<TacoTranslate origin="application-menu">
			// ...
		</TacoTranslate>
	);
}

Origins તમને સ્ટ્રિંગ્સને અર્થપૂર્ણ કન્ટેનરોમાં અલગ કરવા દે છે. ઉદાહરણ તરીકે, તમે ડોક્યુમેન્ટેશન માટે એક Origin અને તમારા માર્કેટિંગ પેજ માટે બીજું Origin રાખી શકો છો.

વધુ સૂક્ષ્મ નિયંત્રણ માટે, તમે કમ્પોનન્ટ સ્તરે ઓરિજિન્સ સેટ કરી શકો છો.

આને હાંસલ કરવા માટે, તમારા પ્રોજેક્ટમાં એકથી વધુ 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}
		/>
	);
}

ઉપરનું ઉદાહરણ સાદા ટેક્સ્ટ તરીકે રેન્ડર કરવામાં આવશે.

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