Құжаттама: 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)
	};
}

Мәтін жолдары қалай аударылады

Мәтіндер серверлерімізге жеткенде біз алдымен оларды тексеріп, сақтаймыз, содан кейін дереу машина аудармасын қайтарамыз. Машина аудармалары әдетте біздің AI аудармаларымызға қарағанда сапасы төмен болғанымен, олар жылдам бастапқы жауап береді.

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

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

Шығанауларды пайдалану

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

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

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

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

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

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

Сервер жағында рендерлеу