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

Использование TacoTranslate

Russian

Перевод строк

В настоящее время существует три способа перевода строк: компонент 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)
	};
}

Когда строки попадают на наши серверы, мы сначала проверяем и сохраняем их, а затем немедленно возвращаем машинный перевод. Хотя машинные переводы обычно уступают по качеству нашим переводам, выполненным ИИ, они обеспечивают быстрый первоначальный ответ.

Одновременно мы запускаем асинхронную задачу перевода, чтобы получить высококачественный, передовой ИИ-перевод для вашей строки. Как только перевод ИИ будет готов, он заменит машинный перевод и будет отправляться всякий раз, когда вы запрашиваете переводы ваших строк.

Если вы вручную перевели строку, эти переводы имеют приоритет и будут возвращены вместо автоматических.

Использование origins

В проектах TacoTranslate есть то, что мы называем origins. Считайте их точками входа, папками или группами для ваших строк и переводов.

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

Как переводятся строки

Использование origins

Работа с переменными

Управление HTML-контентом