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

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

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

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

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

Шығу көздерін пайдалану

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

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}
		/>
	);
}

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

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