Құжаттама: 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 жобаларында біз origin деп аталатын нәрселер болады. Оларды сіздің жолдар мен аудармаларыңызға арналған кіру нүктелері, папкалар немесе топтар деп ойлаңыз.

import {TacoTranslate} from 'tacotranslate/react';

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

Origins сізге жолдарды мағыналы контейнерлерге бөліп орналастыруға мүмкіндік береді. Мысалы, бір 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 мазмұнын басқару