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

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

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

Туындаған жерлерді пайдалану

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

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

Серверлік жағынан өңдеу

TacoTranslate пайдалану

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

Туындаған жерлерді пайдалану

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

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