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

Одночасно ми запускаємо асинхронну задачу перекладу, щоб створити високоякісний, передовий переклад на базі ШІ для вашого рядка. Коли переклад, створений ШІ, буде готовий, він замінить машинний переклад і надсилатиметься щоразу, коли ви запитуєте переклади для ваших рядків.

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

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

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

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

Як перекладаються рядки

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

Робота зі змінними

Керування HTML-контентом