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

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

Bulgarian

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

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

За да постигнете това, помислете за използване на няколко доставчици на 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

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

Използване на източници

Работа с променливи

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