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

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

Користење на origin-ите

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

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

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

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