Документация: Использование 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)
	};
}

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

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

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

Использование источников

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

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-контентом