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

import {TacoTranslate} from 'tacotranslate/react';

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

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