TacoTranslatea käyttäminen
Merkkijonojen kääntäminen
Tällä hetkellä merkkijonojen kääntämiseen on kolme tapaa: Translate-komponentti, useTranslation-koukku tai translateEntries-apuohjelma.
Translate-komponentin käyttäminen.
Tulostaa käännökset span elementin sisälle 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ä komponentissa esimerkiksi as="p".
useTranslation-hookin 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 ja palautamme välittömästi konekäännöksen. Vaikka konekäännökset ovat yleensä laadultaan heikompia kuin tekoälykäännöksemme, 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 merkkijonon manuaalisesti, nämä käännökset ovat etusijalla ja ne palautetaan sen sijaan.
Originien hyödyntäminen
TacoTranslate-projektit sisältävät niin sanottuja origins-kohteita. Voit ajatella niitä merkkijonoillesi ja käännöksillesi tarkoitetuiksi aloituspisteiksi, kansioiksi tai ryhmiksi.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}Originit antavat sinun erotella merkkijonot merkityksellisiin säilöihin. Esimerkiksi voit käyttää yhtä originia dokumentaatiota varten ja toista markkinointisivua varten.
Tarkempaa hallintaa varten voit määrittää originit komponenttitasolla.
Saavuttaaksesi tämän, harkitse useiden TacoTranslate tarjoajien käyttämistä projektissasi.
Huomaa, että sama merkkijono saattaa saada eri käännöksiä eri lähteissä.
Loppujen lopuksi se, miten jaat merkkijonot alkuperien mukaan, riippuu sinusta ja tarpeistasi. Huomaa kuitenkin, että jos yhdessä alkuperässä on paljon merkkijonoja, latausajat saattavat kasvaa.
Muuttujien käsittely
Dynaamisen sisällön, kuten käyttäjänimien, päivämäärien, sähköpostiosoitteiden ja muun, yhteydessä tulisi aina käyttää muuttujia.
Merkkijonoissa olevat muuttujat ilmoitetaan kaksoisaaltosulkeilla, 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:n renderoinnin poistamista käytöstä suositellaan voimakkaasti, kun käännetään epäluotettavaa sisältöä, kuten käyttäjien luomaa sisältöä.
Kaikki ulostulot puhdistetaan aina sanitize-html ennen kuin ne renderöidään.
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ä.