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

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

Macedonian

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

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

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

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

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