Използване на 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 превод за вашия низ. Щом AI преводът е готов, той ще замени машинния превод и ще бъде изпращан всеки път, когато поискате преводи за вашите низове.
Ако сте превели низ ръчно, тези преводи имат предимство и се връщат.
Използване на произходи
Проектите на TacoTranslate съдържат това, което наричаме origins. Мислете за тях като за входни точки, папки или групи за вашите низове и преводи.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}
Origins ви позволяват да разделяте низовете в отделни смислени контейнери. Например, можете да имате един origin за документация и друг за вашата маркетингова страница.
За по-прецизен контрол можете да настроите 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}
/>
);
}
Горният пример ще бъде визуализиран като обикновен текст.