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

TacoTranslate қолдану

Kazakh

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

Қазіргі уақытта жолдарды аударудың үш тәсілі бар: Translate компоненті, useTranslation хук немесе translateEntries утилитасы.

Translate компонентін пайдалану.
Аудармаларды span элементінің ішіне шығарады және HTML көрсетуді қолдайды.

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

Мысалы, компонентте as="p" параметрін пайдаланып, элемент типін өзгерте аласыз.

useTranslation хукін қолдану.
Аудармаларды қарапайым жол (string) ретінде қайтарады. Мысалы, 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)
	};
}

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

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

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

Origin-дарды пайдалану

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

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 қолдану

Мәтіндер қалай аударылады

Origin-дарды пайдалану

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

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