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

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

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

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

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

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