TacoTranslate
/
ДокументаціяЦіни
 
  1. Вступ
  2. Початок роботи
  3. Налаштування та конфігурація
  4. Використання TacoTranslate
  5. Рендеринг на стороні сервера
  6. Розширене використання
  7. Найкращі практики
  8. Обробка помилок та налагодження
  9. Підтримувані мови

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

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

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

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

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

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

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

Для досягнення цього, розгляньте можливість використання кількох провайдерів TacoTranslate у вашому проєкті.

Будь ласка, зверніть увагу, що один і той самий рядок може отримувати різні переклади в різних origins.

Врешті-решт, як розділяти рядки на 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}
		/>
	);
}

Вищенаведений приклад буде відображено як звичайний текст.

Рендеринг на стороні сервера

Продукт від NattskiftetЗроблено в Норвегії