Құжаттама: TacoTranslate-ты пайдалану

TacoTranslate пайдалану

Kazakh

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

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

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

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

Origins мүмкіндігін пайдалану

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

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

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

Ескеріңіз: бірдей жол әртүрлі origins-та әртүрлі аудармалар алуы мүмкін.

Ақыр соңында, мәтін жолдарын 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}
		/>
	);
}

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

Серверлік рендерлеу

TacoTranslate пайдалану

Жолдар қалай аударылады

Origins мүмкіндігін пайдалану

Айнымалыларды өңдеу

HTML мазмұнын басқару