Использование TacoTranslate
Перевод строк
В настоящее время существует три способа перевода строк: компонент 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 на уровне компонента.
Чтобы этого добиться, рассмотрите возможность использования нескольких провайдеров TacoTranslate в вашем проекте.
Обратите внимание, что одна и та же строка может иметь разные переводы в разных источниках.
В конечном счёте, то, как вы разделяете строки по «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}
/>
);
}
Приведённый выше пример будет отображён как обычный текст.