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

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

Bulgarian

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

В момента има три начина за превеждане на низове: компонента 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 съдържание