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 aracı.

Translate bileşenini kullanma.
Çevirileri bir span elementi içinde verir ve HTML render etmeyi 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 hook'unun kullanımı.
Çevirileri düz bir dize (string) 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.
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)
	};
}

Stringler sunucularımıza ulaştığında önce doğrular ve kaydederiz, ardından hemen bir makine çevirisi döndürürüz. 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, son teknoloji bir yapay zeka çevirisi üretmek üzere asenkron bir çeviri işi başlatıyoruz. Yapay zeka çevirisi hazır olduğunda makine çevirisinin yerini alacak ve metinleriniz için çeviri istediğinizde her seferinde gönderilecektir.

Bir dizeyi manuel olarak çevirdiyseniz, bu çeviriler önceliklidir ve döndürülen sürüm olarak kullanılır.

Origin'leri kullanma

TacoTranslate projeleri bizim orijinler dediğimiz öğeleri içerir. Onları dizeleriniz 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, dizgeleri 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 oluşturabilirsiniz.

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ı kaynaklarda farklı çeviriler alabileceğini unutmayın.

Sonuç olarak, metinleri orijinlere nasıl ayıracağınız size ve ihtiyaçlarınıza bağlıdır. Ancak, bir orijinde çok sayıda metin 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 gibi dinamik içerikler için her zaman değişkenler kullanmalısınız.

Metinlerdeki değişkenler çift süslü parantez kullanılarak bildirilir; ö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ıştan vazgeçmek için useDangerouslySetInnerHTML özelliğini false olarak ayarlayabilirsiniz.

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

Tüm çıktı 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şkenlerle çalışma

HTML içeriğini yönetme