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

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

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

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

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

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

Для более детального контроля вы можете настроить источники на уровне компонента.

Чтобы достичь этого, рассмотрите возможность использования нескольких 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-контентом