Используя 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)
};
}
Как строки переводятся
Когда строки поступают на наши серверы, мы сначала проверяем и сохраняем их, а затем сразу же возвращаем машинный перевод. Хотя машинные переводы, как правило, имеют более низкое качество по сравнению с нашими ИИ-переводами, они предоставляют быстрый первоначальный ответ.
Одновременно мы запускаем асинхронную задачу перевода, чтобы создать качественный, современный перевод AI для вашей строки. Как только перевод AI будет готов, он заменит машинный перевод и будет отправлен всякий раз, когда вы запросите переводы для ваших строк.
Если вы вручную перевели строку, эти переводы имеют приоритет и возвращаются вместо этого.
Используя источники
Проекты TacoTranslate содержат то, что мы называем origins. Рассматривайте их как точки входа, папки или группы для ваших строк и переводов.
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}
/>
);
}
Приведенный выше пример будет отображен как простой текст.