Документација: Користење на 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 ви овозможуваат да ги разделите низите во значајни контејнери. На пример, можете да имате еден origin за документација и друг за вашата маркетинг страница.

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

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

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

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

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

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

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