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

TacoTranslate пайдалану

Kazakh

Мәтіндерді аудару

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

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

import {Translate} from 'tacotranslate/react';

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

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

useTranslation hook-ін пайдалану.
Аудармаларды қарапайым жол ретінде қайтарады. Мысалы, 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 жасай аласыз.

Көбірек егжей-тегжейлі басқару үшін, бастапқы нүктелерді компонент деңгейінде баптай аласыз.

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

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

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

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

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

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