ડોક્યુમેન્ટેશન: TacoTranslate નો ઉપયોગ

TacoTranslate નું ઉપયોગ કરવું

Gujarati

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

સ્ટ્રિંગ્સ અનુવાદ કરવા હાલમાં ત્રણ રીતો ઉપલબ્ધ છે: Translate ઘટક, useTranslation હૂક, અથવા translateEntries યુટિલિટી।

Translate component નો ઉપયોગ.
અનુવાદ 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 સેટ કરી શકો છો.

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

ઉપર આપેલું ઉદાહરણ સાદા લખાણ તરીકે રજૂ થશે.

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