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

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

Macedonian

Преведување на низи

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

Ако некој стринг е преведен рачно, тие преводи имаат предност и ќе бидат вратени наместо другите.

Користење на потекла

Проектите на TacoTranslate содржат она што ние го нарекуваме origins. Сметајте ги како влезни точки, папки или групи за вашите низи и преводи.

import {TacoTranslate} from 'tacotranslate/react';

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

Изворите ви овозможуваат да ги разделите текстовите во смислени контејнери. На пример, можете да имате еден извор за документација и друг за вашата маркетинг-страница.

За пофина контрола, можете да ги поставите origins на ниво на компонентата.

За да го постигнете тоа, разгледајте користење на повеќе TacoTranslate провајдери во вашиот проект.

Имајте предвид дека истата низа може да добие различни преводи во различни извори.

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

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

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