Používání TacoTranslate
Překládání řetězců
V současné době existují tři způsoby, jak překládat řetězce: komponenta Translate, hook useTranslation, nebo utilita translateEntries.
Použití komponenty Translate.
Zobrazuje překlady v elementu span a podporuje vykreslování HTML.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}Typ elementu můžete změnit například pomocí as="p" v komponentě.
Použití hooku useTranslation.
Vrací překlady jako prostý řetězec. Užitečné například v meta značkách.
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>
);
}Použití nástroje translateEntries.
Překládejte řetězce na straně serveru. Vylepšete své OpenGraph obrázky.
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)
};
}Jak se řetězce překládají
Když se řetězce dostanou na naše servery, nejprve je ověříme a uložíme, poté okamžitě vrátíme strojový překlad. Ačkoliv jsou strojové překlady obecně nižší kvality než naše AI překlady, poskytují rychlou počáteční odpověď.
Současně zahájíme asynchronní překladový úkol, který vygeneruje vysoce kvalitní, špičkový AI překlad pro váš řetězec. Jakmile bude AI překlad připraven, nahradí strojový překlad a bude zasílán vždy, když požádáte o překlady vašich řetězců.
Pokud jste řetězec přeložili ručně, mají tyto překlady přednost a jsou místo toho vráceny.
Využití originů
Projekty TacoTranslate obsahují to, čemu říkáme origins. Považujte je za vstupní body, složky nebo skupiny pro vaše řetězce a překlady.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}Původy vám umožňují rozdělit řetězce do smysluplných kontejnerů. Například můžete mít jeden původ pro dokumentaci a jiný pro vaši marketingovou stránku.
Pro podrobnější kontrolu můžete nastavit origins na úrovni komponenty.
K tomu zvažte použití více poskytovatelů TacoTranslate ve vašem projektu.
Vezměte prosím na vědomí, že tentýž řetězec může mít v různých originách odlišné překlady.
Nakonec záleží na vás a vašich potřebách, jak rozdělíte řetězce do originů. Nicméně mějte na paměti, že mnoho řetězců v jednom originu může prodloužit dobu načítání.
Práce s proměnnými
Pro dynamický obsah byste vždy měli používat proměnné, například uživatelská jména, datumy, e-mailové adresy a další.
Proměnné v řetězcích se deklarují pomocí dvojitých závorek, například {{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}});
}Správa HTML obsahu
Ve výchozím nastavení komponenta Translate podporuje a vykresluje obsah HTML. Pokud však chcete toto chování vypnout, nastavte useDangerouslySetInnerHTML na false.
Důrazně se doporučuje vypnout vykreslování HTML při překladu nedůvěryhodného obsahu, například uživatelského obsahu.
Veškerý výstup je vždy očištěn pomocí sanitize-html před vykreslením.
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}
/>
);
}Výše uvedený příklad bude vykreslen jako prostý text.