Uporaba TacoTranslate
Prevajanje nizov
Trenutno obstajajo trije načini za prevajanje nizov: komponenta Translate
, hook useTranslation
ali pripomoček translateEntries
.
Uporaba komponente Translate
Izpiše prevode znotraj elementa span
, prav tako pa podpira izris HTML.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
Vrsto elementa lahko spremenite z uporabo na primer as="p"
na komponenti.
Uporaba [useTranslation
] hooka.
Vrne prevode kot navaden niz. Uporabno je na primer v meta
oznakah.
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 pripomočka translateEntries
.
Prevajajte nize na strežniški strani. Pospešite vaše 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 so nizi prevedeni
Ko niz doseže naše strežnike, ga najprej preverimo in shranimo, nato pa takoj vrnemo strojni prevod. Čeprav so strojni prevodi običajno manj kakovostni v primerjavi z našimi AI prevodi, zagotavljajo hitro začetno odzivnost.
Hkrati sprožimo asinhrono prevajalsko nalogo, da ustvarimo visokokakovosten, najsodobnejši AI prevod za vaš niz. Ko bo AI prevod pripravljen, bo nadomestil strojni prevod in ga bomo poslali vsakič, ko boste zahtevali prevode za vaše nize.
Če ste niz ročno prevedli, ti prevodi prevzamejo prednost in se namesto tega vrnejo.
Uporaba izvorov
Projekti TacoTranslate vsebujejo tisto, čemur pravimo izvor. 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>
);
}
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 podrobno upravljanje lahko nastavite izvore na ravni komponente.
Za dosego tega razmislite o uporabi več ponudnikov TacoTranslate znotraj vašega projekta.
Prosimo, upoštevajte, da ista vrstica lahko prejme različne prevode v različnih virih.
Na koncu je način razdelitve nizov v izvore prepuščen vam in vašim potrebam. Vendar pa upoštevajte, da lahko veliko nizov znotraj enega izvora poveč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 še več.
Spremenljivke v nizih so deklarirane z uporabo dvojnih oglatih oklepajev, 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 vsebine HTML
Privzeto komponenta Translate
podpira in izrisuje HTML vsebino. Vendar pa se lahko tej funkcionalnosti odpoveš tako, da nastaviš vrednost useDangerouslySetInnerHTML
na false
.
Onemogočanje upodabljanja HTML je močno priporočeno pri prevajanju nepreverjene vsebine, kot je vsebina, ustvarjena z 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.