Korišćenje TacoTranslate
Prevođenje stringova
Trenutno postoje tri načina za prevođenje stringova: komponenta Translate
, hook useTranslation
, ili pomoćna 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!" />;
}
Možete promeniti tip elementa koristeći, na primer, as="p"
na komponenti.
Korišćenje useTranslation
hook-a.
Vraća prevode kao običan string. 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
utiliteta.
Prevodite stringove na serverskoj strani. Unapredite 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 prevode stringovi
Kada stringovi stignu na naše servere, prvo ih validiramo i sačuvamo, a zatim odmah vraćamo mašinski prevod. Iako su mašinski prevodi obično nižeg kvaliteta u poređenju sa našim AI prevodima, oni pružaju 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 dostavljen svaki put kada zatražite prevode za svoje stringove.
Ako ste ručno preveli string, ti prevodi imaju prednost i biće vraćeni umesto drugih.
Korišćenje origina
Projekti TacoTranslate-a sadrže ono što nazivamo origins. Smatrajte ih ulaznim tačkama, mapama ili grupama za vaše tekstove i prevode.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}
Origins vam omogućavaju da razdvojite stringove u smislene kontejnere. Na primer, možete imati jedan origin za dokumentaciju, a drugi za vašu marketinšku stranicu.
Za detaljniju kontrolu, možete podesiti origini na nivou komponente.
Da biste to postigli, razmislite o korišćenju više TacoTranslate provajdera u okviru vašeg projekta.
Imajte na umu da ista tekstualna vrednost može dobiti različite prevode u različitim originima.
U konačnici, način na koji razdvajate stringove u originima zavisi od vas i vaših potreba. Imajte na umu da veliki broj stringova u jednom originu može povećati vreme učitavanja.
Rukovanje promenljivama
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 stringovima se deklarišu pomoću dvostrukih vitičastih zagrada, kao {{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
Podrazumevano, komponenta Translate
podržava i prikazuje HTML sadržaj. Međutim, možete onemogućiti ovo ponašanje postavljanjem useDangerouslySetInnerHTML
na false
.
Preporučuje se da se renderovanje HTML-a onemogući prilikom prevođenja nepouzdanog sadržaja, kao što je sadržaj koji kreiraju korisnici.
Sav izlaz se uvek sanitizuje pomoću sanitize-html pre nego što se prikaže.
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 će biti prikazan kao običan tekst.