Gebruik 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 binne 'n span element uit, en ondersteun die weergawing van HTML.
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 as 'n eenvoudige string terug. 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 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 ons bedieners bereik, valideer en stoor ons hulle eers en gee dan onmiddellik ’n masjienvertaling terug. Alhoewel masjienvertalings oor die algemeen van laer gehalte is as ons KI-vertalings, bied hulle ’n vinnige aanvanklike vertaling.
Tegelykertyd begin ons 'n asynchrone vertaaltaak om 'n hoë kwaliteit, gevorderde KI-vertaling vir jou string te genereer. Sodra die KI-vertaling gereed is, sal dit die masjienvertaling vervang en word dit gestuur wanneer jy vertalings vir jou stringe versoek.
As u 'n string handmatig vertaal het, het daardie vertalings voorrang en word hulle in plaas daarvan teruggestuur.
Gebruik van oorspronge
TacoTranslate-projekte bevat wat ons oorspronge noem. Dink daaraan as ingange, 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, jy kan een oorsprong hê vir dokumentasie en ’n ander vir jou bemarkingsbladsy.
Vir meer fyn beheer, kan jy oorspronge op komponentvlak opstel.
Om dit te bereik, oorweeg om verskeie TacoTranslate verskaffers te gebruik binne jou projek.
Neem asseblief kennis dat dieselfde string in verskillende oorspronge verskillende vertalings kan ontvang.
Uiteindelik is dit aan u en u behoeftes hoe u stringe in oorspronge verdeel. Let egter daarop dat baie stringe in een oorsprong die laaitye kan verhoog.
Omgaan met veranderlikes
Jy moet altyd veranderlikes gebruik vir dinamiese inhoud, soos gebruikersname, datums, e-posadresse en meer.
Veranderlikes in stringe word met dubbele hakies verklaar, 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
Per verstek ondersteun en render die Translate komponent HTML-inhoud. Jy kan egter van hierdie gedrag afsien deur useDangerouslySetInnerHTML op false te stel.
Dit word sterk aanbeveel om HTML-rendering uit te skakel wanneer onbetroubare inhoud, soos gebruikersgegenereerde inhoud, vertaal word.
Alle uitvoer word altyd deur sanitize-html gesuiwer voordat dit vertoon 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 vertoon word.