Құжаттама: 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 болуы мүмкін.

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

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

Бірдей жол әр түрлі origin-дерде әртүрлі аударылуы мүмкін екенін ескеріңіз.

Ақыр соңында, мәтіндерді origins-тарға қалай бөлу — сіздің қажеттіліктеріңіз бен таңдауыңызға байланысты. Алайда бір 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}
		/>
	);
}

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

Серверлік рендерлеу