Користење на TacoTranslate
Преведување низи
Во моментов постојат три начини за превод на низи: компонента Translate
, кука useTranslation
или алатката translateEntries
.
Користење на компонентата Translate
.
Прикажува преводи во рамки на елементот span
, и поддржува прикажување на HTML.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
Можете да го промените типот на елементот користејќи, на пример, as="p"
на компонента.
Користење на useTranslation
hook.
Враќа преводи како обичен текст. Корисно, на пример, во meta
тагови.
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>
);
}
Користење на translateEntries
алатката.
Преведувајте низи на серверската страна. Надградете ги вашите OpenGraph слики.
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)
};
}
Како се преведуваат низа
Кога низите ќе пристигнат на нашите сервери, ние прво ги верификуваме и ги зачувуваме, а потоа веднаш враќаме машински превод. Иако машинските преводи генерално се пониски по квалитет споредено со нашите AI преводи, тие обезбедуваат брзо првично одговор.
Истовремено, ние започнуваме асинхрона задача за превод за да генерираме висококвалитетен, најсовремен AI превод за вашиот текст. Откако AI преводот ќе биде подготвен, тој ќе го замени машинскиот превод и ќе биде испратен секогаш кога ќе побарате преводи за вашите текстови.
Доколку сте превеле низа рачно, тие преводи имаат предност и се враќаат наместо тоа.
Користење на извори
Проектите на TacoTranslate содржат она што го нарекуваме origins. Замислете ги како влезни точки, папки или групи за вашите низи и преводи.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}
Origins ви овозможуваат да ги разделите низите во смислени контејнери. На пример, можете да имате еден origin за документација и друг за вашата маркетинг страница.
За пофина контрола, можете да поставите origins на ниво на компонент.
За да го постигнете тоа, разгледајте го користењето на повеќе TacoTranslate провајдери во рамките на вашиот проект.
Ве молиме имајте предвид дека иста низа може да добие различни преводи во различни источници.
На крајот, начинот на кој ги разделувате стринговите во оригинали е ваш избор и зависи од вашите потреби. Сепак, имајте предвид дека голем број стрингови во еден оригинал може да го зголеми времето на вчитување.
Ракување со променливи
Секогаш треба да користите променливи за динамична содржина, како што се кориснички имиња, датуми, е-пошта и повеќе.
Променливите во низите се декларираат со користење на двојни загради, како {{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 содржина
По дифолт, компонентата Translate
поддржува и прикажува HTML содржина. Сепак, можете да го исклучите ова однесување со поставување на useDangerouslySetInnerHTML
на false
.
Силно се препорачува исклучување на HTML прикажувањето при превод на недоверлива содржина, како што е содржина создадена од корисници.
Сите излезни податоци секогаш се прочистуваат со sanitize-html пред да се прикажат.
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}
/>
);
}
Горенаведениот пример ќе се прикаже како обичен текст.