દસ્તાવેજીકરણ: 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>
	);
}

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

વધુ નિર્દિષ્ટ નિયંત્રણ માટે, તમે કમ્પONENT સ્તરે 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}
		/>
	);
}

ઉપરોક્ત ઉદાહરણ સાદા લખાણ તરીકે રેન્ડર થશે.

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