Документація: Використання TacoTranslate

Використання TacoTranslate

Ukrainian

Переклад рядків

Наразі є три способи перекладу рядків: компонент 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-переклад буде готовий, він замінить машинний переклад і надсилатиметься щоразу, коли ви запитуватимете переклади ваших рядків.

Якщо ви вручну переклали рядок, ці переклади мають пріоритет і будуть повернуті натомість.

Використання джерел

Проєкти TacoTranslate містять те, що ми називаємо джерелами. Уявіть їх як точки входу, папки або групи для ваших рядків і перекладів.

import {TacoTranslate} from 'tacotranslate/react';

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

Origins дозволяють розділяти рядки на логічні контейнери. Наприклад, один origin може бути для документації, а інший — для вашої маркетингової сторінки.

Для більш детального контролю ви можете налаштувати origins на рівні компонента.

Щоб досягти цього, розгляньте використання кількох 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-контентом