Uporaba TacoTranslate
Prevajanje nizov
Trenutno obstajajo trije načini za prevajanje nizov: komponenta Translate
, hook useTranslation
, ali pripomoček translateEntries
.
Uporaba komponente Translate
.
Prikazuje prevode znotraj elementa span
in podpira upodabljanje HTML.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
Tip elementa lahko spremenite z uporabo, na primer, as="p"
na komponenti.
Uporaba kaveljčka useTranslation
.
Vrne prevode kot navaden niz. Uporabno 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
.
Prevedite nize na strežniški strani. Poživite 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 prevajajo nizi
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 nižje kakovosti v primerjavi z našimi AI prevodi, zagotavljajo hitro začetno odzivnost.
Hkrati začnemo asinhrono prevajalsko opravilo, da ustvarimo visokokakovosten, najsodobnejši AI prevod za vaš niz. Ko je AI prevod pripravljen, bo nadomestil strojni prevod in bo poslan, kadar koli zahtevate prevode za svoje nize.
Če ste niz ročno prevedli, ti prevodi prevladajo in se vrnejo namesto tega.
Uporaba izvorov
Projekti TacoTranslate vsebujejo tisto, čemur pravimo origini. Razmišljajte o njih kot o vstopnih točkah, mapah ali skupinah za vaše nize in prevode.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}
Origins vam omogočajo, da ločite nize v smiselne vsebnike. Na primer, lahko imate en origin za dokumentacijo in drugega za vašo marketinško stran.
Za bolj natančen nadzor lahko nastavitve izvora izvedete na nivoju komponente.
Za dosego tega razmislite o uporabi več ponudnikov TacoTranslate znotraj vašega projekta.
Upoštevajte, da lahko isti niz v različnih originih prejme različne prevode.
Na koncu je način, kako razdelite nize v izvore, odvisen od vas in vaših potreb. Vendar pa upoštevajte, da lahko veliko število nizov znotraj enega izvora podaljša čas nalaganja.
Ravnanje s spremenljivkami
Vedno morate uporabljati spremenljivke za dinamične vsebine, kot so uporabniška imena, datumi, e-poštni naslovi in druge.
Spremenljivke v nizih so deklarirane z uporabo dvojnimi oglatimi 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 pa se lahko odločite, da tega vedenja ne uporabljate, tako da nastavite vrednost useDangerouslySetInnerHTML
na false
.
Onemogočanje upodabljanja HTML je močno priporočeno pri prevajanju vsebin, ki niso zaupanja vredne, na primer vsebin, ki jih ustvarijo uporabniki.
Vsi izhodi so vedno očiščeni z uporabo 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.