Gebruik van TacoTranslate
Vertaling van stringe
Daar is tans drie maniere om stringe te vertaal: Die Translate
komponent, die useTranslation
hook, of die translateEntries
hulpmiddel.
Gebruik van die Translate
komponent.
Gee vertalings uit binne 'n span
element, en ondersteun HTML-weergave.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
Jy kan die elementtipe verander deur byvoorbeeld as="p"
op die komponent te gebruik.
Gebruik die useTranslation
hook.
Gee vertalings terug as 'n gewone string. Nuttig, byvoorbeeld, in meta
tags.
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
hulpmiddel.
Vertaal stringe aan die bedienerkant. Gee jou OpenGraph beelde 'n hupstoot.
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 hulle eers, en stuur dan onmiddellik 'n masjienvertaling terug. Alhoewel masjienvertalings oor die algemeen van laer gehalte as ons KI-vertalings is, bied hulle 'n vinnige aanvanklike reaksie.
Terselfdertyd loods ons 'n asynchrone vertaaltaak om 'n hoë-gehalte, hoogs gevorderde KI-vertaling vir jou string te genereer. Sodra die KI-vertaling gereed is, sal dit die masjienvertaling vervang en dit sal gestuur word wanneer jy vertalings vir jou stringe versoek.
As u 'n string handmatig vertaal het, het daardie vertalings voorrang en word dit in plaas daarvan teruggestuur.
Gebruik van oorspronge
TacoTranslate-projekte bevat wat ons oorspronge noem. Beskou dit as toegangspunte, vouers of groepe vir jou stringe en vertalings.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}
Oorspronge laat jou toe om stringe in sinvolle houers te skei. Byvoorbeeld kan jy een oorsprong hê vir dokumentasie en 'n ander vir jou bemarkingsbladsy.
Vir meer gedetailleerde beheer kan jy oorspronge op die komponentvlak opstel.
Om dit te bereik, oorweeg om verskeie TacoTranslate verskaffers te gebruik binne jou projek.
Neem asseblief kennis dat dieselfde string verskillende vertalings in verskillende oorspronge kan ontvang.
Uiteindelik is dit aan u en u behoeftes hoe u stringe in oorspronge verdeel. Let egter daarop dat baie stringe binne een oorsprong laaitye kan verhoog.
Hantering van veranderlikes
Jy moet altyd veranderlikes gebruik vir dinamiese inhoud, soos gebruikersname, datums, e-posadresse en meer.
Veranderlikes in stringe word met dubbele hakies gedeclareer, 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 render die Translate
komponent HTML-inhoud. Jy kan hierdie gedrag egter deaktiveer deur useDangerouslySetInnerHTML
op false
te stel.
Dit word sterk aanbeveel om HTML-rendering uit te skakel wanneer u onbetroubare inhoud vertaal, soos gebruikersgegenereerde inhoud.
Alle uitvoer word altyd gesaniteer met sanitize-html voordat dit weergegee 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}
/>
);
}
Bogenoemde voorbeeld sal as gewone teks vertoon word.