Құжаттама: TacoTranslate қолдану

TacoTranslate пайдалану

Kazakh

Мәтін жолдарын аудару

Қазіргі уақытта мәтін жолдарын аударудың үш тәсілі бар: Translate компоненті, useTranslation hook ретінде немесе 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 аудармасы дайын болғанда ол машиналық аударманың орнын басады және сіз сұратқан сайын жіберіледі.

Егер сіз жолды қолмен аударған болсаңыз, сол аудармалар басым болып, олар қайтарылады.

Origins-ті пайдалану

TacoTranslate жобаларында біз шығу нүктелері деп атайтын ұғымдар бар. Оларды мәтіндеріңіз бен аудармаларыңыз үшін кіру нүктелері, қалталар немесе топтар ретінде ойлаңыз.

import {TacoTranslate} from 'tacotranslate/react';

function Menu() {
	return (
		<TacoTranslate origin="application-menu">
			// ...
		</TacoTranslate>
	);
}

Origins сізге мәтін жолдарын мағыналы контейнерлерге бөлуге мүмкіндік береді. Мысалы, құжаттама үшін бір origin, ал маркетинг беті үшін басқа origin тағайындай аласыз.

Неғұрлым егжей-тегжейлі бақылау үшін, компонент деңгейінде origin-дарды орнатуға болады.

Осы мақсатқа жету үшін жобаңызда бірнеше TacoTranslate провайдерлерін пайдалануды қарастырыңыз.

Бірдей мәтін әртүрлі шығу көздерінде әртүрлі аудармалар алуы мүмкін екенін ескеріңіз.

Ақырында, жолдарды origin-тарға қалай бөлу — сіздің талғамыңыз бен қажеттіліктеріңізге байланысты. Алайда бір 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}
		/>
	);
}

Жоғарыдағы мысал қарапайым мәтін ретінде көрсетіледі.

Сервер жағында рендерлеу