Gebruik TacoTranslate
Vertaal stringe
Daar is tans drie maniere om stringe te vertaal: Die Translate
komponent, die useTranslation
hook, of die translateEntries
nutsprogram.
Gebruik van die Translate
komponent.
Gee vertalings uit binne ʼn span
element, 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.
Die gebruik van die useTranslation
haak.
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
nutsprogram.
Vertaal stringe aan die bedienerkant. Gee jou OpenGraph beelde ekstra krag.
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 hulle ʼn vinnige aanvanklike reaksie.
Terselfdertyd begin ons 'n asynchrone vertaaltaak om 'n hoë kwaliteit, vooruitstrewende 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 prioriteit en word dit eerder teruggestuur.
Benutting van oorspronge
TacoTranslate-projekte bevat dit wat ons oorspronge 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>
);
}
Origins 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 u oorspronge op komponentevlak opstel.
Om dit te bereik, oorweeg dit om verskeie TacoTranslate verskaffers binne jou projek te gebruik.
Neem asseblief kennis dat dieselfde string verskillende vertalings kan kry in verskillende oorspronge.
Uiteindelik is dit aan u en u behoeftes hoe u stringe in oorspronge verdeel. Neem egter kennis dat dit laaitye kan verhoog as daar baie stringe binne een oorsprong is.
Hantering van veranderlikes
Jy moet altyd veranderlikes gebruik vir dinamiese inhoud, soos gebruikersname, datums, e-posadresse, en meer.
Veranderlikes in stringe word verklaar met dubbele 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
By verstek ondersteun en render die Translate
komponent HTML-inhoud. U kan egter hierdie gedrag deaktiveer deur useDangerouslySetInnerHTML
op false
te stel.
Dit word sterk aanbeveel om HTML-weergawes uit te skakel wanneer u inhoud vertaal wat nie vertrou word nie, soos gebruikersgegenereerde inhoud.
Alle uitsette word altyd gesuiwer 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}
/>
);
}
Boonste voorbeeld sal as gewone teks vertoon word.