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

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

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

Використання 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Зроблено в Норвегії