Uporaba TacoTranslate
Prevajanje nizov
Trenutno obstajajo trije načini za prevajanje nizov: komponenta Translate
, hook useTranslation
, ali pripomoček translateEntries
.
Uporaba komponente Translate
.
Prikaže prevode znotraj elementa span
, in podpira upodabljanje HTML-a.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
Vrsto elementa lahko spremenite, na primer z as="p"
v komponenti.
Uporaba useTranslation
hooka.
Vrača prevode kot navaden niz. Uporabno je, na primer, v oznakah 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>
);
}
Uporaba orodja translateEntries
.
Prevajajte nize na strežniški strani. Izboljšajte svoje OpenGraph slike.
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)
};
}
Kako se nizi prevajajo
Ko nizi prispejo na naše strežnike, jih najprej preverimo in shranimo, nato pa takoj vrnemo strojni prevod. Čeprav so strojni prevodi na splošno manj kakovostni od naših AI-prevodov, zagotavljajo hiter začetni odgovor.
Vzporedno sprožimo asinhrono nalogo prevajanja, da za vaš niz ustvarimo visokokakovosten, najsodobnejši AI prevod. Ko bo AI prevod pripravljen, bo zamenjal strojni prevod in bil poslan vsakič, ko boste zahtevali prevode svojih nizov.
Če ste niz ročno prevedli, imajo ti prevodi prednost in se namesto tega vrnejo.
Uporaba izvorov
Projekti TacoTranslate vsebujejo tisto, čemur rečemo izvori. Predstavljajte si jih kot vstopne točke, mape ali skupine za vaše nize in prevode.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}
Izvori vam omogočajo razdelitev nizov v smiselne skupine. Na primer, lahko imate en izvor za dokumentacijo in drugega za vašo marketinško stran.
Za bolj podroben nadzor lahko izvore nastavite na ravni komponente.
Da bi to dosegli, razmislite o uporabi več ponudnikov TacoTranslate v vašem projektu.
Upoštevajte, da lahko isti niz v različnih izvorih dobi različne prevode.
Na koncu je razdelitev nizov v izvore prepuščena vam in vašim potrebam. Vendar upoštevajte, da lahko veliko število nizov znotraj enega izvora poveča čas nalaganja.
Ravnanje s spremenljivkami
Vedno uporabljajte spremenljivke za dinamično vsebino, na primer uporabniška imena, datume, e-poštne naslove in drugo.
Spremenljivke v nizih se deklarirajo z dvojnimi oklepaji, na primer {{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}});
}
Upravljanje HTML-vsebine
Privzeto komponenta Translate
podpira in prikazuje HTML vsebino. Vendar lahko to vedenje onemogočite tako, da nastavite useDangerouslySetInnerHTML
na false
.
Močno priporočamo, da onemogočite prikaz HTML pri prevajanju nezaupanja vredne vsebine, na primer vsebine, ki jo ustvarijo uporabniki.
Vse izhodne vsebine se vedno očistijo z sanitize-html pred prikazom.
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}
/>
);
}
Zgornji primer bo prikazan kot navadno besedilo.