Документация: Използване на TacoTranslate

Използване на TacoTranslate

Bulgarian

Превеждане на низове

В момента има три начина за превод на низове: компонента 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 преводът е готов, той ще замени машинния превод и ще бъде предоставян всеки път, когато поискате преводи за вашите низове.

Ако сте превели низ ръчно, тези преводи имат предимство и се връщат вместо това.

Използване на origins

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

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

Горният пример ще бъде изобразен като обикновен текст.

Рендиране от страна на сървъра

Използване на TacoTranslate

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

Използване на origins

Обработка на променливи

Управление на HTML съдържание