TacoTranslate:n käyttö
Merkkijonojen kääntäminen
Tällä hetkellä on kolme tapaa kääntää merkkijonoja: Translate -komponentti, useTranslation -hook tai translateEntries -apuohjelma.
Translate komponentin käyttäminen.
Tuottaa käännökset span elementin sisällä ja tukee HTML:n renderöintiä.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}Voit muuttaa elementin tyyppiä esimerkiksi asettamalla komponenttiin arvon as="p".
useTranslation koukun käyttäminen.
Palauttaa käännökset tavallisena merkkijonona. Hyödyllinen esimerkiksi meta tageissa.
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>
);
}translateEntries -apuohjelman käyttäminen.
Käännä merkkijonot palvelinpuolella. Tehosta OpenGraph -kuviasi.
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)
};
}Miten merkkijonot käännetään
Kun merkkijonot saapuvat palvelimillemme, validoimme ja tallennamme ne ensin, minkä jälkeen palautamme välittömästi konekäännöksen. Vaikka konekäännökset ovat yleensä laadultaan heikompia verrattuna AI-käännöksiimme, ne tarjoavat nopean alkuvastauksen.
Samanaikaisesti käynnistämme asynkronisen käännöstehtävän luodaksemme korkealaatuisen ja huipputeknisen tekoälykäännöksen merkkijollesi. Kun tekoälykäännös on valmis, se korvaa konekäännöksen ja lähetetään aina, kun pyydät käännöksiä merkkijonoillesi.
Jos olet kääntänyt merkkijonon manuaalisesti, nämä käännökset ovat etusijalla ja ne palautetaan sen sijaan.
Alkuperien hyödyntäminen
TacoTranslate-projektit sisältävät niin sanottuja origins-kohteita. Ajattele niitä sisäänkäynteinä, kansioina tai ryhminä merkkijonoillesi ja käännöksillesi.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}Origins antaa sinun jakaa merkkijonot merkityksellisiin kokonaisuuksiin. Esimerkiksi sinulla voi olla yksi origin dokumentaatiolle ja toinen markkinointisivullesi.
Tarkempaan hallintaan voit määrittää origin-tasot komponenttikohtaisesti.
Tätä varten harkitse useiden TacoTranslate -palveluntarjoajien käyttämistä projektissasi.
Huomaa, että sama merkkijono saattaa saada eri käännökset eri alkuperissä.
Lopulta merkkijonojen erottaminen eri origin-ryhmiin on sinun ja tarpeidesi päätettävissä. Huomaa kuitenkin, että monien merkkijonojen pitäminen samassa originissa saattaa pidentää latausaikoja.
Muuttujien käsittely
Sinun tulisi aina käyttää muuttujia dynaamiselle sisällölle, kuten käyttäjien nimille, päivämäärille, sähköpostiosoitteille ja muulle.
Merkkijonojen muuttujat määritellään käyttämällä kaksoisliitteitä, kuten {{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}});
}HTML-sisällön hallinta
Oletuksena Translate -komponentti tukee ja näyttää HTML-sisältöä. Voit kuitenkin estää tämän asettamalla useDangerouslySetInnerHTML arvoksi false.
HTML-renderöinnin poistaminen käytöstä on vahvasti suositeltavaa epäluotettavan sisällön, kuten käyttäjien luoman sisällön, kääntämisessä.
Kaikki tulosteet puhdistetaan aina sanitize-html -kirjastolla ennen näyttämistä.
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}
/>
);
}Yllä oleva esimerkki renderöidään tavallisena tekstinä.