Korišćenje TacoTranslate
Prevođenje stringova
Trenutno postoje tri načina za prevođenje stringova: komponenta Translate
, hook useTranslation
ili utilitarna funkcija translateEntries
.
Korišćenje Translate
komponente.
Prikazuje prevode unutar span
elementa i podržava renderovanje HTML-a.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
Tip elementa možete promeniti korišćenjem, na primer, as="p"
na komponenti.
Korišćenje useTranslation
hook-a.
Vraća prevode kao običan tekst. Korisno, na primer, u meta
tagovima.
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>
);
}
Korišćenje translateEntries
utilitija.
Prevodi stringove na serverskoj strani. Pojač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 stringovi prevode
Kada stringovi stignu na naše servere, prvo ih validiramo i čuvamo, a zatim odmah vraćamo mašinski prevod. Iako su mašinski prevodi uglavnom nižeg kvaliteta u odnosu na naše AI prevode, oni obezbeđuju brz početni odgovor.
Istovremeno, pokrećemo asinhroni zadatak prevođenja kako bismo generisali visokokvalitetan, najsavremeniji AI prevod za vaš string. Kada AI prevod bude spreman, zameniće mašinski prevod i biće poslat svaki put kada zatražite prevode za vaše stringove.
Ako ste ručno preveli neki string, ti prevodi imaju prednost i vraćaju se umesto toga.
Korišćenje izvora
TacoTranslate projekti sadrže ono što nazivamo origins. Zamislite ih kao ulazne tačke, fascikle ili grupe za vaše nizove i prevode.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}
Origins vam omogućavaju da razdvojite tekstove u smislenije kontejnere. Na primer, možete imati jedan origin za dokumentaciju, a drugi za vašu marketinšku stranicu.
Za detaljniju kontrolu, možete podesiti origins na nivou komponenti.
Da biste to postigli, razmotrite korišćenje više TacoTranslate provajdera unutar vašeg projekta.
Imajte na umu da ista fraza može dobiti različite prevode u različitim originima.
Na kraju, kako ćete podeliti nizove u origin-e zavisi od vas i vaših potreba. Ipak, imajte na umu da veliki broj nizova u jednom origin-u može povećati vreme učitavanja.
Rukovanje varijablama
Uvek treba da koristite promenljive za dinamički sadržaj, kao što su korisnička imena, datumi, e-mail adrese i slično.
Varijable u nizovima se deklarišu koristeći dvostruke zagrade, kao što je {{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 sadržajem
Po defaultu, Translate
komponenta podržava i renderuje HTML sadržaj. Međutim, možete isključiti ovo ponašanje tako što ćete postaviti useDangerouslySetInnerHTML
na false
.
Isključenje prikaza HTML-a se snažno preporučuje prilikom prevođenja nepouzdanog sadržaja, kao što je sadržaj koji generišu korisnici.
Svi izlazi su uvek očišćeni pomoću sanitize-html pre nego što budu prikazani.
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}
/>
);
}
Gornji primer biće prikazan kao običan tekst.