Uporaba TacoTranslate
Prevajanje nizov
Trenutno obstajajo trije načini za prevajanje nizov: komponenta Translate
, hook useTranslation
ali pripomoček translateEntries
.
Uporaba komponenta Translate
.
Izhaja prevode znotraj elementa span
, ter podpira prikaz 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 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 pripomočka translateEntries
.
Prevajajte nize na strežniški strani. Nadgradite 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 so nizi prevedeni
Ko vrstice prispejo na naše strežnike, jih 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 hiter začetni odziv.
Hkrati zaženemo asinhrono prevajalsko opravilo za ustvarjanje visokokakovostnega, vrhunskega AI prevoda za vaš niz. Ko je AI prevod pripravljen, bo nadomestil strojni prevod in bo poslan vsakič, ko boste zahtevali prevode za svoje nize.
Če ste niz ročno prevedli, ti prevodi imajo prednost in se namesto tega vrnejo.
Uporaba izvorov
Projekti TacoTranslate vsebujejo tisto, čemur pravimo izvor. 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 nize razdelite 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 originov opravite na ravni komponent.
Za to premislite o uporabi več ponudnikov TacoTranslate znotraj vašega projekta.
Upoštevajte, da lahko ista niz dobi različne prevode v različnih izvorih.
Na koncu je ločevanje nizov v izvore odvisno od vas in vaših potreb. Vendar pa upoštevajte, da lahko veliko število nizov znotraj enega izvora poveča čas nalaganja.
Ravnanje s spremenljivkami
Vedno bi morali uporabljati spremenljivke za dinamično vsebino, kot so uporabniška imena, datumi, e-poštni naslovi in podobno.
Spremenljivke v nizih so označene z dvojno 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 vsebine HTML
Privzeto komponenta Translate
podpira in prikazuje HTML vsebino. Vendar se lahko iz tega vedenja izključite tako, da nastavite useDangerouslySetInnerHTML
na false
.
Onemogočanje upodabljanja HTML je močno priporočeno pri prevajanju nezaupanja vrednih vsebin, kot so vsebine, ki jih ustvarijo uporabniki.
Vsi izhodi so vedno očiščeni 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.