Документация: использование 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 содержат то, что мы называем источниками. Рассматривайте их как точки входа, папки или группы для ваших строк и переводов.

import {TacoTranslate} from 'tacotranslate/react';

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

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

Для более точного управления вы можете настроить 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-контентом