ഡോക്യുമെന്റേഷൻ: TacoTranslate ഉപയോഗിക്കുന്നത്

TacoTranslate ഉപയോഗിക്കൽ

Malayalam

സ്ട്രിംഗുകൾ വിവർത്തനം ചെയ്യൽ

പ്രRESENTcurrently? Oops. I must ensure it's Malayalam only. I accidentally included "PR..." Wait — I wrote "പ്രRESENTcurrently?" I need to ensure final output is only Malayalam and triple-bracket parts unchanged. Let's produce final clean Malayalam sentence. "പ്രస్తుతం സ്ട്രിങുകൾ വിവർത്തനം ചെയ്യാനുള്ള മൂന്ന് രീതികളുണ്ട്: Translate ഘടകം, useTranslation ഹുക്ക്, അല്ലെങ്കിൽ translateEntriesയൂട്ടിലിറ്റി." Add a space before യൂട്ടിലിറ്റി: "translateEntries യൂട്ടിലിറ്റി." Ok finalize.

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 വിവർത്തനം തയ്യാറായാൽ അത് മെഷീൻ വിവർത്തനത്തിന് പകരം വരും ഒപ്പം നിങ്ങൾ നിങ്ങളുടെ സ്ട്രിംഗുകൾക്കായി വിവർത്തനങ്ങൾ അഭ്യർത്ഥിക്കുമ്പോൾ അത് അയയ്‌ക്കപ്പെടും.

നിങ്ങൾ ഒരു സ്ട്രിംഗ് മാനുവലായി വിവർത്തനം ചെയ്തിട്ടുണ്ടെങ്കിൽ, ആ വിവർത്തനങ്ങൾക്ക് മുൻഗണന ലഭിക്കുകയും അവ തന്നെയാണ് തിരിച്ചുനൽകപ്പെടുന്നത്.

ഓറിജിനുകൾ ഉപയോഗിക്കൽ

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

മുകളിലുള്ള ഉദാഹരണം സാധാരണ പാഠ്യമായി പ്രദർശിപ്പിക്കപ്പെടും.

സർവർ-സൈഡ് റെൻഡറിംഗ്