TacoTranslate'n käyttäminen
Merkkijonojen kääntäminen
Tällä hetkellä on kolme tapaa kääntää merkkijonoja: Translate-komponentti, useTranslation-koukku tai translateEntries-aputyökalu.
Translate-komponentin käyttäminen.
Tuottaa käännökset span-elementtiin ja tukee HTML:n renderöintiä.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}Voit muuttaa elementin tyyppiä käyttämällä esimerkiksi as="p" komponentissa.
useTranslation hookin käyttö.
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ä merkkijonoja 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, ja palautamme välittömästi konekäännöksen. Vaikka konekäännökset ovat yleensä laadultaan heikompia verrattuna tekoälykäännöksiimme, ne tarjoavat nopean alkuvastauksen.
Samanaikaisesti aloitamme asynkronisen käännöstehtävän tuottaaksemme korkealaatuisen, huipputason tekoälykäännöksen merkkijonollesi. Kun tekoälykäännös on valmis, se korvaa konekäännöksen ja se lähetetään aina, kun pyydät käännöksiä merkkijonoillesi.
Jos olet kääntänyt jonkin merkkijonon manuaalisesti, kyseiset käännökset menevät etusijalle ja palautetaan sen sijaan.
Originien hyödyntäminen
TacoTranslate-projekteissa on sitä, mitä kutsumme origins-nimisiksi. Ajattele niitä merkkijonoillesi ja käännöksillesi tarkoitettuina sisäänkäynteinä, kansioina tai ryhminä.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}Originien avulla voit jakaa merkkijonot merkityksellisiin ryhmiin. Esimerkiksi voit käyttää yhtä originia dokumentaatiota varten ja toista markkinointisivullesi.
Tarkempaan hallintaan voit asettaa originit komponenttitasolla.
Tämän saavuttamiseksi harkitse projektissasi useiden TacoTranslate tarjoajien käyttöä.
Huomaa, että sama merkkijono voi saada eri käännöksiä eri lähteissä.
Lopulta se, miten jaat merkkijonot origin‑ryhmiin, riippuu sinusta ja tarpeistasi. Huomaa kuitenkin, että jos yhdessä originissa on paljon merkkijonoja, latausaika voi kasvaa.
Muuttujien käsittely
Dynaamisen sisällön, kuten käyttäjänimien, päivämäärien, sähköpostiosoitteiden ja muiden tietojen kohdalla sinun tulisi aina käyttää muuttujia.
Merkkijonoissa olevat muuttujat ilmoitetaan käyttämällä kaksoisaaltosulkeita, 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
Oletusarvoisesti Translate‑komponentti tukee ja renderöi HTML-sisältöä. Voit kuitenkin poistaa tämän käytöstä asettamalla useDangerouslySetInnerHTML arvoksi false.
HTML-renderöinnin poistaminen käytöstä on erittäin suositeltavaa, kun käännetään epäluotettavaa sisältöä, kuten käyttäjien luomaa sisältöä.
Kaikki tulosteet puhdistetaan aina sanitize-html ennen niiden renderöintiä.
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 esitetään tavallisena tekstinä.