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

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

Macedonian

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

Во моментов, постојат три начини за превод на низи: компонентата Translate, хуков 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>
	);
}

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

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

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

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

На крајот, како ќе ги поделите низите во оригинали зависи од вас и вашите потреби. Сепак, забележете дека имањето многу низи во еден оригинал може да ја зголеми времето на вчитување.

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

Треба секогаш да користите променливи за динамична содржина, како што се имиња на корисници, датуми, е-пошта и повеќе.

Променливите во текстовите се декларираат со користење на двојни загради, како {{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 содржина