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

સાથેસાથે, અમે તમારા સ્ટ્રિંગ માટે ઉચ્ચ ગુણવત્તાવાળી, અદ્યતન એઆઇ અનુવાદ ઉત્પન્ન કરવા માટે અસિંક્રોનસ અનુવાદ કાર્ય શરૂ કરીએ છીએ. જ્યારે એઆઇ અનુવાદ તૈયાર થાય છે, તે મશીન અનુવાદની જગ્યાએ લેવામાં આવશે અને જ્યારે પણ તમે તમારા સ્ટ્રિંગ્સ માટે અનુવાદ માંગશો ત્યારે મોકલવામાં આવશે.

જો તમે કોઈ સ્ટ્રિંગને હાથથી અનુવાદ કર્યો હોય તો તે અનુવાદને પ્રાથમિકતા મળે છે અને તે જ અનુવાદ પરત આપવામાં આવે છે.

ઓરિજિન્સનો ઉપયોગ

TacoTranslate પ્રોજેક્ટોમાં જેને અમે origins કહે છે તે હોય છે. તેને તમારા સ્ટ્રિંગ્સ અને અનુવાદો માટે એન્ટ્રી પોઈન્ટ્સ, ફોલ્ડર્સ અથવા જૂથો ગણો.

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}
		/>
	);
}

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

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