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 binne ʼn span
element uit, en ondersteun die weergawe 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 van die useTranslation
hook.
Gee vertalings as ’n eenvoudige string terug. Nuttig byvoorbeeld in 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 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 ons bedieners bereik, valideer en stoor ons dit eers, en gee dan onmiddellik ʼn masjienvertaling terug. Alhoewel masjienvertalings oor die algemeen laer kwaliteit het in vergelyking met ons KI-vertalings, bied hulle ʼn vinnige aanvanklike reaksie.
Terselfdertyd begin ons ’n asynchrone vertaaltaak om ’n hoë kwaliteit, gesofistikeerde 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 jy ’n string met die hand vertaal het, gaan daardie vertalings voor en word dit in plaas daarvan teruggegee.
Gebruik van oorspronge
TacoTranslate-projekte bevat wat ons origins noem. Dink daaraan 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 betekenisvolle houers te skei. Byvoorbeeld, jy kan een oorsprong hê vir dokumentasie en 'n ander vir jou bemarkingsblad.
Vir meer gedetailleerde beheer, kan jy oorspronge op die komponentvlak instel.
Om dit te bereik, oorweeg dit om meervoudige TacoTranslate verskaffers binne jou projek te gebruik.
Let asseblief daarop dat dieselfde string verskillende vertalings in verskillende oorspronge kan ontvang.
Uiteindelik is dit aan u en u behoeftes om stringe in oorspronge te skei. Neem egter kennis dat die hê van baie stringe binne een oorsprong laai-tye kan laat toeneem.
Hantering van veranderlikes
Jy moet altyd veranderlikes gebruik vir dinamiese inhoud, soos gebruikersname, datums, e-posadresse, en meer.
Veranderlikes in stringe word gedeclareer 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 render die Translate
komponent HTML-inhoud. U kan egter hierdie gedrag afskakel deur useDangerouslySetInnerHTML
op false
te stel.
Dit word sterk aanbeveel om HTML-weergawes uit te skakel wanneer u onbetroubare inhoud vertaal, soos deur gebruikers gegenereerde inhoud.
Alle uitvoer word altyd gesuiwer met sanitize-html 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 eenvoudige teks vertoon word.