Документација: Користење на 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 hook.
Враќа преводи како обичен низ. Корисно е, на пример, во 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>
	);
}

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

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

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

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

Серверско рендерирање

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

Како се преведуваат низите

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

Ракување со променливи

Управување со HTML содржина