Uporaba TacoTranslate
Prevajanje nizov
Trenutno obstajajo trije načini za prevajanje nizov: Translate komponenta, useTranslation hook, ali pripomoček translateEntries.
Uporaba komponente Translate.
Prikazuje prevode znotraj elementa span, in podpira prikaz HTML-a.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}Vrsto elementa lahko spremenite, na primer tako, da na komponenti uporabite as="p".
Uporaba hooka useTranslation.
Vrača 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. 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 kot naši prevodi, ki jih ustvari AI, zagotavljajo hiter začetni odziv.
Ob tem sprožimo asinhrono prevajalsko opravilo, da za vaš niz ustvarimo visokokakovosten, najsodobnejši AI prevod. 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, bodo ti prevodi imeli prednost in bodo vrnjeni.
Uporaba izvorov
Projekti TacoTranslate vsebujejo to, kar imenujemo izvori. Razmislite 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>
);
}Izvori vam omogočajo razdelitev nizov v smiselne skupine. Na primer, lahko imate en izvor za dokumentacijo in drugega za svojo marketinško stran.
Za bolj podroben nadzor lahko nastavite izvore na ravni komponent.
Da bi to dosegli, razmislite o uporabi več ponudnikov TacoTranslate v vašem projektu.
Upoštevajte, da lahko isti niz v različnih izvorih prejme različne prevode.
Konec koncev je, kako nize razporedite po originah, odvisno od vas in vaših potreb. Vendar pa upoštevajte, da lahko veliko število nizov v enem originu poveča čas nalaganja.
Ravnanje s spremenljivkami
Vedno uporabljajte spremenljivke za dinamično vsebino, kot so uporabniška imena, datumi, e-poštni naslovi in podobno.
Spremenljivke v nizih se deklarirajo z dvojnimi zavitimi 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 upodablja HTML vsebino. Vendar lahko to vedenje izključite tako, da nastavite useDangerouslySetInnerHTML na false.
Močno priporočamo onemogočanje upodabljanja HTML pri prevajanju nepouzdane vsebine, na primer vsebine, ki jo ustvarijo uporabniki.
Vsi izhodi so vedno očiščeni s pomočjo 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.