TacoTranslate-dən istifadə
Mətnlərin tərcüməsi
Hal-hazırda mətnləri tərcümə etməyin üç yolu var: Translate komponenti, useTranslation hooku və ya translateEntries köməkçi aləti.
Translate komponentindən istifadə.
Tərcümələri span elementi daxilində göstərir və HTML-in render edilməsini dəstəkləyir.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}Məsələn, komponentdə as="p" istifadə edərək elementin tipini dəyişə bilərsiniz.
useTranslation hookundan istifadə.
Tərcümələri sadə mətn kimi qaytarır. Məsələn, meta teqlərində faydalıdır.
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 alətindən istifadə.
Mətnləri server tərəfində tərcümə edin. OpenGraph şəkillərinizi daha da gücləndirin.
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)
};
}Sətirlər necə tərcümə olunur
Sətirlər serverlərimizə çatdıqda, onları əvvəlcə doğrulayır və yadda saxlayırıq, sonra dərhal maşın tərcüməsini qaytarırıq. Maşın tərcümələri ümumiyyətlə bizim süni intellekt tərcümələrimizə nisbətən daha aşağı keyfiyyətli olsa da, onlar sürətli ilkin cavab təmin edir.
Eyni zamanda, sətiriniz üçün yüksək keyfiyyətli, ən müasir süni intellekt tərcüməsi yaratmaq məqsədilə asinxron tərcümə işi başlatırıq. AI tərcüməsi hazır olduqda, maşın tərcüməsinin yerinə keçəcək və sətirləriniz üçün tərcümə tələb etdiyiniz zaman göndəriləcək.
Əgər bir sətri əl ilə tərcümə etmisinizsə, həmin tərcümələr üstünlük təşkil edir və onlar qaytarılır.
Mənşələrdən istifadə
TacoTranslate layihələri bizim mənşələr adlandırdığımız şeyləri ehtiva edir. Onları mətnləriniz və tərcümələriniz üçün giriş nöqtələri, qovluqlar və ya qruplar kimi düşünün.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}Originlər sizə mətinləri məna daşıyan konteynerlərə ayırmağa imkan verir. Məsələn, sənədlər üçün bir origin, marketinq səhifəniz üçün isə başqa bir origin ola bilər.
Daha incə nəzarət üçün originləri komponent səviyyəsində qura bilərsiniz.
Buna nail olmaq üçün bir neçə TacoTranslate təminatçısından istifadə etməyi layihənizdə nəzərdən keçirin.
Xahiş edirik nəzərə alın ki, eyni sətrin fərqli originlərdə fərqli tərcümələri ola bilər.
Nəticə etibarilə, mətnləri originlərə necə ayırmağınız sizə və ehtiyaclarınıza bağlıdır. Lakin yadda saxlayın ki, bir origin daxilində çox sayda mətnin olması yüklənmə vaxtını artıra bilər.
Dəyişənlərin idarə edilməsi
Dinamik məzmun üçün həmişə dəyişənlərdən istifadə etməlisiniz, məsələn, istifadəçi adları, tarixlər, e‑poçt ünvanları və s.
Sətirlərdəki dəyişənlər ikiqat mötərizələrlə elan olunur, məsələn {{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 məzmununun idarə edilməsi
Varsayılan olaraq, Translate komponenti HTML məzmununu dəstəkləyir və göstərir. Lakin bu davranışdan imtina etmək üçün useDangerouslySetInnerHTML parametrini false olaraq təyin edə bilərsiniz.
Etibarsız məzmunları — məsələn, istifadəçilər tərəfindən yaradılan məzmunu — tərcümə edərkən HTML göstərilməsini söndürmək qətiyyətlə tövsiyə olunur.
Bütün çıxışlar hər zaman göstərilmədən əvvəl sanitize-html ilə təmizlənir.
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}
/>
);
}Yuxarıdakı nümunə sadə mətn kimi göstəriləcək.