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ö.
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 vaihtaa elementtityyppiä käyttämällä esimerkiksi as="p"-attribuuttia komponentissa.
useTranslation -koukun käyttäminen.
Palauttaa käännökset tavallisena merkkijonona. Kätevä 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, minkä jälkeen palautamme välittömästi konekäännöksen. Vaikka konekäännökset ovat yleisesti ottaen laadultaan heikompia verrattuna tekoälykäännöksiimme, ne tarjoavat nopean alkuvastauksen.
Samaan aikaan aloitamme asynkronisen käännöstyön luodaksemme korkealaatuisen, huipputeknisen tekoälykäännöksen merkkijonollesi. 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-projekteissa on niin sanottuja origins-kohteita. Voit ajatella 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 erotella merkkijonot merkityksellisiin säiliöihin. Esimerkiksi voit käyttää yhtä originia dokumentaatiolle ja toista markkinointisivullesi.
Tarkempaan hallintaan voit määrittää origin-tasot komponenttikohtaisesti.
Saavuttaaksesi tämän, harkitse useiden TacoTranslate -tarjoajien käyttöä projektissasi.
Huomaa, että sama merkkijono saattaa saada eri käännöksiä eri alkuperissä.
Lopulta se, miten erotat merkkijonot alkuperiin, on sinun ja tarpeidesi varassa. Huomaa kuitenkin, että monien merkkijonojen sisällyttäminen yhteen alkuperään saattaa lisätä latausaikoja.
Muuttujien käsittely
Sinun tulisi aina käyttää muuttujia dynaamiselle sisällölle, kuten käyttäjänimille, päivämäärille, sähköpostiosoitteille ja muille.
Merkkijonojen muuttujat määritellään käyttämällä kaksoishakasulkuja, 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 renderöi HTML-sisältöä. Voit kuitenkin kytkeä tämän pois asettamalla useDangerouslySetInnerHTML arvoksi false.
HTML:n renderöinnin poistaminen käytöstä suositellaan vahvasti, kun käännetään luottamattomia sisältöjä, kuten käyttäjien luomaa sisältöä.
Kaikki tulosteet puhdistetaan aina sanitize-html avulla ennen niiden 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 pelkkänä tekstinä.