Dokümantasyon: TacoTranslate Kullanımı

TacoTranslate'in Kullanımı

Turkish

Dizeleri çevirme

Şu anda dizeleri tercüme etmenin üç yolu vardır: Translate bileşeni, useTranslation hook'u veya translateEntries aracı.

Translate bileşeninin kullanımı.
Çevirileri bir span öğesi içinde verir ve HTML içeriğinin render edilmesini destekler.

import {Translate} from 'tacotranslate/react';

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

Örneğin, bileşende as="p" kullanarak element 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ı aracını kullanma.
Sunucu tarafında metinleri ç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)
	};
}

Dizeler 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 göre daha düşük kalitede olsa da, hızlı bir ilk yanıt sağlar.

Eş zamanlı olarak, metniniz için yüksek kaliteli, son teknoloji bir yapay zekâ çevirisi oluşturmak üzere eşzamansız bir çeviri işi başlatıyoruz. Yapay zekâ çevirisi hazır olduğunda, makine çevirisinin yerini alacak ve metinlerinizin çevirisini talep ettiğinizde gönderilecektir.

Bir dizeyi manuel olarak çevirdiyseniz, bu çeviriler önceliklidir ve döndürülür.

Orijinleri kullanma

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

import {TacoTranslate} from 'tacotranslate/react';

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

Origins, metinleri anlamlı kapsayıcılara ayırmanızı sağlar. Örneğin, dokümantasyon 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 yapılandırabilirsiniz.

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

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

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

Değişkenlerle çalışma

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

Metinlerdeki 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 değerini false olarak ayarlayabilirsiniz.

Kullanıcı tarafından oluşturulan içerik gibi güvenilmeyen içerikleri çevirirken HTML işlenmesini devre dışı bırakmanız şiddetle önerilir.

Tüm çıktılar her zaman sanitize-html ile görüntülenmeden ö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örüntülenecektir.

Sunucu tarafı oluşturma

TacoTranslate'in Kullanımı

Metinler nasıl çevrilir

Orijinleri kullanma

Değişkenlerle çalışma

HTML içeriğini yönetme