દસ્તાવેજીકરણ: 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 પ્રોવાઇડરોનો ઉપયોગ કરવા વિચાર કરો.

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

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

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

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

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

ઉપરનું ઉદાહરણ સાદા ટેક્સ્ટ તરીકે પ્રદર્શિત થશે.

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