Paggamit ng TacoTranslate
Pagsasalin ng mga string
Sa kasalukuyan, mayroong tatlong paraan upang isalin ang mga string: Ang Translate
na komponent, ang useTranslation
na hook, o ang translateEntries
na utility.
Paggamit ng Translate
na komponent.
Naglalabas ng mga pagsasalin sa loob ng isang span
na elemento, at sumusuporta sa pag-render ng HTML.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
Maaari mong baguhin ang uri ng elemento gamit, halimbawa, ang as="p"
sa component.
Paggamit ng useTranslation
hook.
Nagre-return ng mga salin bilang simpleng string. Kapaki-pakinabang sa, halimbawa, mga meta
tag.
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>
);
}
Paggamit ng translateEntries
utility.
Isalin ang mga string sa server side. Palakasin ang iyong OpenGraph na mga larawan.
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)
};
}
Paano isinasalin ang mga string
Kapag naabot ng mga string ang aming mga server, unang sinusuri at sine-save namin ang mga ito, pagkatapos ay agad na ibinabalik ang isang machine translation. Bagaman ang mga machine translation ay karaniwang mas mababa ang kalidad kumpara sa aming mga AI translation, nagbibigay ito ng mabilis na paunang tugon.
Kasabay nito, nagsisimula kami ng isang asynchronous na trabaho sa pagsasalin upang makabuo ng mataas na kalidad, makabagong AI na pagsasalin para sa iyong string. Kapag ang AI na pagsasalin ay handa na, papalitan nito ang machine translation at ipapadala sa tuwing hihilingin mo ang mga pagsasalin para sa iyong mga string.
Kung ikaw ay manu-manong nagsalin ng isang string, ang mga pagsasaling iyon ang mauuna at ibabalik sa halip.
Paggamit ng mga pinagmulan
Ang mga proyekto ng TacoTranslate ay naglalaman ng tinatawag naming origins. Ituring mo ang mga ito bilang mga entry point, folder, o grupo para sa iyong mga string at pagsasalin.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}
Pinapayagan ka ng Origins na paghiwalayin ang mga string sa mga makabuluhang lalagyan. Halimbawa, maaari kang magkaroon ng isang origin para sa dokumentasyon at isa pa para sa iyong pahina ng marketing.
Para sa mas detalyadong kontrol, maaari kang mag-set up ng mga origins sa antas ng component.
Upang makamit ito, isaalang-alang ang paggamit ng maraming TacoTranslate provider sa loob ng iyong proyekto.
Pakipansin na ang parehong string ay maaaring makatanggap ng iba't ibang mga pagsasalin sa iba't ibang pinagmulan.
Sa huli, ang paraan ng paghahati mo ng mga string sa mga origin ay nakasalalay sa iyo at sa iyong mga pangangailangan. Gayunpaman, tandaan na ang pagkakaroon ng maraming string sa isang origin ay maaaring magpataas ng oras ng paglo-load.
Paghawak ng mga variable
Dapat palaging gumamit ng mga variable para sa dynamic na nilalaman, tulad ng mga pangalan ng gumagamit, petsa, mga e-mail address, at iba pa.
Ang mga variable sa mga string ay dineklara gamit ang dobleng panaklong, tulad ng {{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}});
}
Pamamahala ng nilalaman ng HTML
Sa default, sinusuportahan at nirender ng Translate
na component ang HTML na nilalaman. Gayunpaman, maaari kang pumili na huwag gamitin ang gawi na ito sa pamamagitan ng pagtatakda ng useDangerouslySetInnerHTML
sa false
.
Lubos na inirerekomenda ang pag-disable ng HTML rendering kapag nagsasalin ng hindi mapagkakatiwalaang nilalaman, tulad ng nilalaman na ginawa ng gumagamit.
Lahat ng output ay palaging nililinis gamit ang sanitize-html bago ipakita.
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}
/>
);
}
Ang halimbawa sa itaas ay ipapakita bilang plain text.