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

import {TacoTranslate} from 'tacotranslate/react';

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

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

За по-фино управление можете да конфигурирате източници на ниво компонент.

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

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

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