Құжаттама: 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)
	};
}

Жолдар серверлерімізге келгенде, біз алдымен оларды тексеріп, сақтаймыз, содан кейін дереу машиналық аударманы қайтарамыз. Машиналық аудармалар, әдетте, біздің ЖИ аудармаларымызға қарағанда сапасы төмен болса да, олар жылдам бастапқы жауап береді.

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

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

Түпнұсқаларды пайдалану

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

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

Мұны жүзеге асыру үшін, жобаның ішінде бірнеше 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}
		/>
	);
}

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

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

TacoTranslate қолдану

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

Түпнұсқаларды пайдалану

Айнымалыларды басқару

HTML контентін басқару