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

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

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

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

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}
		/>
	);
}

Приведённый выше пример будет отображён как обычный текст.

Серверный рендеринг

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

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

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

Обработка переменных

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