TacoTranslate-dən istifadə
Mətnlərin tərcüməsi
Hal-hazırda sətirləri tərcümə etməyin üç yolu var: Translate komponenti, useTranslation hooku və ya translateEntries köməkçi vasitəsi.
Translate komponentindən istifadə.
Tərcümələri span elementi daxilində göstərir və HTML-i render etməyi 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 element növünü dəyişə bilərsiniz.
useTranslation hookundan istifadə.
Tərcümələri sadə mətn (string) 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 utilitindən istifadə.
Sətirləri server tərəfində tərcümə edin. OpenGraph şəkillərinizi 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, əvvəlcə onları yoxlayır və saxlayırıq, sonra dərhal maşın tərcüməsini qaytarırıq. Maşın tərcümələri adətən süni intellekt tərcümələrimizdən daha aşağı keyfiyyətdə olsa da, sürətli ilkin cavab təmin edir.
Eyni zamanda, sizin mətniniz üçü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. Süni intellekt tərcüməsi hazır olduqdan sonra o maşın tərcüməsinin yerini tutacaq və siz mətnlə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ə əvəzinə qaytarılır.
Mənbələrdən istifadə
TacoTranslate layihələri bizim adlandırdığımız mənşələ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 mətinləri mənalı konteynerlərə ayırmağa imkan verir. Məsələn, sənədləşdirmə üçün bir origin, marketinq səhifəniz üçün isə başqa bir origin ola bilər.
Daha detallı nəzarət üçün originləri komponent səviyyəsində qura bilərsiniz.
Buna nail olmaq üçün layihənizdə bir neçə TacoTranslate provayderindən istifadə etməyi nəzərdən keçirin.
Zəhmət olmasa nəzərə alın ki, eyni mətn müxtəlif mənşələrdə fərqli tərcümələr ala bilər.
Nəticədə, sətirləri originlərə necə ayırmağınız sizə və ehtiyaclarınıza bağlıdır. Bununla belə, bir origin daxilində çox sayda sətrin olması yükləmə vaxtını artıra bilər.
Dəyişənlərlə işləmə
Dinamik məzmun — məsələn, istifadəçi adları, tarixlər, e‑poçt ünvanları və daha çox — üçün həmişə dəyişənlərdən istifadə etməlisiniz.
Sətirlərdəki dəyişənlər ikiqat mötərizələrlə elan edilir, 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
Standart olaraq, Translate komponenti HTML məzmununu dəstəkləyir və göstərir. Bununla belə, 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 renderlənməsinin deaktiv edilməsi şiddətlə tövsiyə olunur.
Bütün çıxışlar hər zaman göstərilməzdə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.