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

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

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

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

За по-фин контрол, можете да настроите origins на ниво компонент.

За да постигнете това, обмислете използването на няколко доставчици на TacoTranslate във вашия проект.

Моля, имайте предвид, че един и същ низ може да получи различни преводи в различни източници.

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

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

Винаги трябва да използвате променливи за динамично съдържание, като потребителски имена, дати, имейл адреси и други.

Променливите в низовете се декларират с двойни скоби, като {{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 съдържание