Dokümantasyon: TacoTranslate Kullanımı

TacoTranslate kullanımı

Turkish

Dizeleri çevirme

Şu anda dizeleri çevirmek için üç yol vardır: Translate bileşeni, useTranslation kancası veya translateEntries yardımcı programı.

Translate bileşenini kullanma.
Çevirileri bir span öğesi içinde verir ve HTML render edilmesini destekler.

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

Örneğin bileşen üzerinde as="p" kullanarak öğe türünü değiştirebilirsiniz.

useTranslation kancasının kullanımı.
Çevirileri düz bir dize olarak döndürür. Örneğin meta etiketlerinde kullanışlı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 yardımcı programını kullanma.
Dizeleri sunucu tarafında çevirin. OpenGraph görsellerinizi güçlendirin.

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)
	};
}

Metinler sunucularımıza ulaştığında önce doğrulayıp kaydediyoruz, ardından hemen bir makine çevirisi döndürüyoruz. Makine çevirileri genellikle yapay zeka çevirilerimize kıyasla daha düşük kalitede olsa da hızlı bir ilk yanıt sağlar.

Aynı zamanda, metniniz için yüksek kaliteli, en gelişmiş yapay zekâ çevirisi üretmek üzere asenkron bir çeviri görevi başlatıyoruz. Yapay zekâ çevirisi hazır olduğunda, makine çevirisinin yerini alacak ve metinlerinizin çevirilerini talep ettiğinizde gönderilecektir.

Bir dizeyi manuel olarak çevirdiyseniz, o çeviriler öncelik kazanır ve bunlar döndürülür.

Origin'leri kullanma

TacoTranslate projeleri bizim origins dediğimiz öğeleri içerir. Bunları metinleriniz ve çevirileriniz için giriş noktaları, klasörler veya gruplar olarak düşünün.

import {TacoTranslate} from 'tacotranslate/react';

function Menu() {
	return (
		<TacoTranslate origin="application-menu">
			// ...
		</TacoTranslate>
	);
}

Origins, dizeleri anlamlı kapsayıcılara ayırmanızı sağlar. Örneğin, belgeler için bir origin, pazarlama sayfanız için ise başka bir origin kullanabilirsiniz.

Daha ayrıntılı kontrol için, origin'leri bileşen düzeyinde ayarlayabilirsiniz.

Bunu başarmak için, projenizde birden fazla TacoTranslate sağlayıcısı kullanmayı düşünün.

Lütfen aynı dizenin farklı origin'lerde farklı çeviriler alabileceğini unutmayın.

Sonuçta, dizileri origin'lere nasıl ayıracağınız size ve ihtiyaçlarınıza bağlıdır. Ancak, bir origin içinde çok sayıda dize olması yükleme sürelerini artırabilir.

Değişkenleri yönetme

Kullanıcı adları, tarihler, e-posta adresleri ve benzeri dinamik içerikler için her zaman değişkenler kullanmalısınız.

Dizelerdeki değişkenler çift süslü parantez kullanılarak tanımlanır, örneğin {{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 içeriğini yönetme

Varsayılan olarak, Translate bileşeni HTML içeriğini destekler ve render eder. Ancak, bu davranışı devre dışı bırakmak için useDangerouslySetInnerHTML öğesini false olarak ayarlayabilirsiniz.

Kullanıcı tarafından oluşturulan içerik gibi güvenilmeyen içeriği çevirirken HTML işlemenin devre dışı bırakılması şiddetle önerilir.

Tüm çıktılar her zaman sanitize-html ile gösterilmeden önce temizlenir.

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}
		/>
	);
}

Yukarıdaki örnek düz metin olarak gösterilecektir.

Sunucu tarafı oluşturma

TacoTranslate kullanımı

Dizelerin nasıl çevrildiği

Origin'leri kullanma

Değişkenleri yönetme

HTML içeriğini yönetme