TacoTranslate naudojimas
Eilutės vertimas
Šiuo metu yra trys būdai versti eilutes: Translate komponentas, useTranslation hook'as, arba translateEntries įrankis.
Naudojant Translate komponentą.
Atvaizduoja vertimus span elemente ir palaiko HTML atvaizdavimą.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}Elemento tipą galite pakeisti, pavyzdžiui, komponente naudodami as="p".
Naudojant useTranslation hooką.
Grąžina vertimus kaip paprastą eilutę. Naudinga, pavyzdžiui, meta žymėms.
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>
);
}Naudojant translateEntries įrankį.
Versti eilutes serverio pusėje. Patobulinkite savo OpenGraph vaizdus.
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)
};
}Kaip verčiamos eilutės
Kai eilutės pasiekia mūsų serverius, pirmiausia jas patikriname ir išsaugome, o tuomet iš karto grąžiname mašininį vertimą. Nors mašininiai vertimai paprastai būna žemesnės kokybės nei mūsų AI vertimai, jie suteikia greitą pradinį atsaką.
Lygiagrečiai inicijuojame asinchroninį vertimo darbą, kad sugeneruotume aukštos kokybės, pažangų dirbtinio intelekto vertimą jūsų eilutei. Kai dirbtinio intelekto vertimas bus paruoštas, jis pakeis mašininį vertimą ir bus pateiktas kiekvieną kartą, kai prašysite savo eilučių vertimų.
Jei eilutę išvertėte rankiniu būdu, tie vertimai turi pirmenybę ir bus grąžinti.
Originų naudojimas
TacoTranslate projektuose yra tai, ką mes vadiname originais. Laikykite juos kaip įėjimo taškus, aplankus arba grupes jūsų eilutėms ir vertimams.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}Šaltiniai leidžia suskirstyti eilutes į prasmingas grupes. Pavyzdžiui, galite turėti vieną šaltinį dokumentacijai ir kitą — savo rinkodaros puslapiui.
Norėdami detalesnės kontrolės, galite sukurti originus komponento lygyje.
Norėdami to pasiekti, apsvarstykite galimybę naudoti kelis TacoTranslate teikėjus savo projekte.
Atkreipkite dėmesį, kad tas pats tekstas gali turėti skirtingus vertimus skirtinguose šaltiniuose.
Galiausiai, tai, kaip paskirstysite eilutes į originus, priklauso nuo jūsų ir jūsų poreikių. Tačiau atkreipkite dėmesį, kad daug eilučių viename origine gali pailginti krovimosi laiką.
Kintamųjų tvarkymas
Visada turėtumėte naudoti kintamuosius dinamiškam turiniui, pvz., vartotojų vardams, datoms, el. pašto adresams ir kt.
Kintamieji eilutėse deklaruojami naudojant dvigubus skliaustelius, pavyzdžiui {{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}});
}HTML turinio valdymas
Pagal nutylėjimą Translate komponentas palaiko ir atvaizduoja HTML turinį. Tačiau galite atsisakyti šio elgesio nustatydami useDangerouslySetInnerHTML į false.
Stipriai rekomenduojama išjungti HTML atvaizdavimą verčiant nepatikimą turinį, pvz., vartotojų sukurtą turinį.
Visa išvestis visuomet išvaloma naudojant sanitize-html prieš atvaizdavimą.
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}
/>
);
}Aukščiau pateiktas pavyzdys bus atvaizduotas kaip paprastas tekstas.