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

TacoTranslate ഉപയോഗിച്ച്

Malayalam

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

ഇപ്പോൾ സ്ട്രിംഗുകൾ വിവർത്തനം ചെയ്യാനുള്ള മൂന്ന് മാർഗങ്ങളുണ്ട്: 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 സജ്ജീകരിക്കാവുന്നതാണ്.

ഇത് നേടാൻ, നിങ്ങളുടെ പ്രോജക്ടിൽ പല 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}
		/>
	);
}

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

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