Документација: Користење на TacoTranslate

Користење на TacoTranslate

Macedonian

Преведување на стрингови

Во моментов постојат три начини за преведување на стрингови: компонентата 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 на ниво на компонентата.

За да го постигнете тоа, размислете за користење на повеќе 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}
		/>
	);
}

Горниот пример ќе биде прикажан како обичен текст.

Рендерирање на серверската страна