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

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

Bulgarian

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

В момента има три начина за превеждане на низове: компонентът Translate, хукът 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>
	);
}

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

За по-прецизен контрол можете да настроите 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 съдържание