Korištenje TacoTranslate
Prevođenje nizova
Trenutno postoje tri načina za prevođenje stringova: komponenta Translate
, hook useTranslation
, ili pomoćna funkcija translateEntries
.
Korištenje Translate
komponente.
Prikazuje prijevode unutar span
elementa i podržava renderiranje HTML-a.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
Možete promijeniti tip elementa koristeći, na primjer, as="p"
na komponenti.
Korištenje useTranslation
hooka.
Vraća prijevode kao običan string. Korisno, na primjer, 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štenje translateEntries
alata.
Prevedite 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 prevode stringovi
Kada stringovi stignu na naše servere, prvo ih validiramo i sačuvamo, a zatim odmah vraćamo strojni prijevod. Iako su strojni prijevodi općenito nižeg kvaliteta u odnosu na naše AI prijevode, oni pružaju brz početni odgovor.
Istovremeno pokrećemo asinhroni zadatak prevođenja kako bismo generirali visokokvalitetan, najsavremeniji AI prijevod za vaš tekst. Kada AI prijevod bude spreman, zamijenit će strojni prijevod i bit će poslan kad god zatražite prijevode za vaše tekstove.
Ako ste ručno preveli string, ti prijevodi imaju prednost i umjesto toga će biti vraćeni.
Korištenje porijekala
Projekti TacoTranslate sadrže ono što nazivamo origins. Smatrajte ih ulaznim tačkama, mapama ili grupama za vaše stringove i prijevode.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}
Origins vam omogućavaju da razdvojite stringove u smislenije kontejnere. Na primjer, možete imati jedan origin za dokumentaciju i drugi za vašu marketinšku stranicu.
Za detaljniju kontrolu, možete postaviti origin-e na nivou komponente.
Da biste to postigli, razmislite o korištenju više TacoTranslate provajdera unutar vašeg projekta.
Imajte na umu da isti niz znakova može imati različite prijevode u različitim izvorima.
U konačnici, način na koji razdvajate stringove u originima zavisi od vas i vaših potreba. Ipak, imajte na umu da veliki broj stringova unutar jednog origina može povećati vrijeme učitavanja.
Rukovanje varijablama
Uvijek biste trebali koristiti varijable za dinamički sadržaj, kao što su korisnička imena, datumi, adrese e-pošte i slično.
Varijable u stringovima se deklariraju pomoću dvostrukih 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
Po zadanoj postavci, komponenta Translate
podržava i prikazuje HTML sadržaj. Međutim, možete onemogućiti ovo ponašanje postavljanjem useDangerouslySetInnerHTML
na false
.
Snažno se preporučuje onemogućiti renderiranje HTML-a prilikom prevođenja nepouzdanog sadržaja, poput sadržaja koji stvaraju korisnici.
Sav izlaz se uvijek sanitizira pomoću sanitize-html prije prikazivanja.
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 primjer će biti prikazan kao običan tekst.