Gebruik TacoTranslate
Vertaling van stringe
Daar is tans drie maniere om stringe te vertaal: Die Translate
komponent, die useTranslation
hook, of die translateEntries
nutsding.
Gebruik van die Translate
komponent.
Gee vertalings uit binne ’n span
element, en ondersteun die render van HTML.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
Jy kan die elementtipes verander deur byvoorbeeld as="p"
op die komponent te gebruik.
Gebruik van die useTranslation
hook.
Gee vertalings terug as 'n gewone string. Nuttig in, byvoorbeeld, meta
etikette.
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>
);
}
Gebruik van die translateEntries
nutsding.
Vertaal stringe aan die bedienerkant. Gee ekstra krag aan jou OpenGraph beelde.
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)
};
}
Hoe stringe vertaal word
Wanneer stringe by ons bedieners aankom, valideer en stoor ons dit eers, en gee dan onmiddellik ’n masjienvertaling terug. Alhoewel masjienvertalings oor die algemeen van laer gehalte is in vergelyking met ons KI-vertalings, bied dit ’n vinnige aanvanklike reaksie.
Tegelykertyd begin ons ’n asynchrone vertaaltaak om ’n hoë kwaliteit, moderne KI-vertaling vir jou string te genereer. Sodra die KI-vertaling gereed is, sal dit die masjienvertaling vervang en gestuur word wanneer jy vertalings vir jou stringe versoek.
As jy ʼn string handmatig vertaal het, het daardie vertalings voorrang en word dit in plaas daarvan teruggestuur.
Benutting van oorspronge
TacoTranslate-projekte bevat wat ons origins noem. Beskou dit as toetspunte, vouers of groepe vir jou stringe en vertalings.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}
Origins laat jou toe om stringe in betekenisvolle houers te skei. Byvoorbeeld, jy kan een origin hê vir dokumentasie en ’n ander vir jou bemarkingsblad.
Vir meer gedetailleerde beheer, kan jy oorspronge op komponentvlak opstel.
Om dit te bereik, oorweeg dit om meerdere TacoTranslate verskaffers binne jou projek te gebruik.
Neem asseblief kennis dat dieselfde string verskillende vertalings in verskillende oorspronge kan ontvang.
Laastens is dit aan jou en jou behoeftes hoe jy stringe in oorspronge verdeel. Neem egter kennis dat om baie stringe binne een oorsprong te hê, laai-tye kan verhoog.
Hantering van veranderlikes
Jy moet altyd veranderlikes gebruik vir dinamiese inhoud, soos gebruikersname, datums, e-posadresse, en meer.
Veranderlikes in stringe word verklaar met dubbel hakies, soos {{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}});
}
Bestuur van HTML-inhoud
Standaard ondersteun en vertoon die Translate
komponent HTML-inhoud. U kan egter van hierdie gedrag afsien deur useDangerouslySetInnerHTML
op false
te stel.
Dit word sterk aanbeveel om HTML-weergawes uit te skakel wanneer u onbetroubare inhoud vertaal, soos inhoud wat deur gebruikers gegenereer is.
Alle uitvoer word altyd gesanitiseer met sanitize-html voordat dit uitgevoer word.
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}
/>
);
}
Die bogenoemde voorbeeld sal as gewone teks weergegee word.