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

TacoTranslate қолдану

Kazakh

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

Қазіргі уақытта жолдарды аударудың үш тәсілі бар: Translate компоненті, useTranslation hook-ы немесе 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 аудармасын жасау үшін асинхронды аударма жұмысын бастаймыз. AI аудармасы дайын болған соң, ол машиналық аударманы ауыстырады және сіз қазақ аудармаларын сұраған сайын жіберіледі.

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

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

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

Толығырақ бақылау үшін компонент деңгейінде origins конфигурациялай аласыз.

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

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

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

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

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

Жолдардағы айнымалылар қос жақшалар арқылы жарияланады, мысалы, {{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 контентін басқару