Dokümantasyon: TacoTranslate Kullanımı

TacoTranslate Kullanımı

Turkish

Dizeleri çevirmek

Şu anda stringleri çevirmek için üç yol vardır: Translate bileşeni, useTranslation kancası veya translateEntries aracı.

Translate bileşenini kullanma.
Çevirileri span öğesi içerisinde çıktı olarak verir ve HTML'nin render edilmesini destekler.

import {Translate} from 'tacotranslate/react';

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

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

useTranslation kancasını kullanmak.
Çevirileri düz bir metin olarak döndürür. Örneğin, meta etiketlerinde 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 aracını kullanma.
İfadeleri 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)
	};
}

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 AI çevirilerimize kıyasla daha düşük kalitede olsa da, hızlı bir başlangıç yanıtı sağlarlar.

Aynı anda, dize için yüksek kaliteli, son teknoloji bir AI çevirisi oluşturmak için asenkron bir çeviri işi başlatıyoruz. AI çevirisi hazır olduğunda, makine çevirisini alacak ve dize çevirisi talep ettiğinizde gönderilecektir.

Eğer bir dizeyi manuel olarak çevirdiyseniz, bu çeviriler öncelikli olarak kabul edilir ve bunun yerine döndürülür.

Kökenlerin Kullanımı

TacoTranslate projeleri, kaynalar olarak adlandırdığımız şeyleri içerir. Onları, dizelerinizi ve çevirilerinizi depolamak 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>
	);
}

Kökler, dizeleri anlamlı kaplara ayırmanıza olanak tanır. Örneğin, bir kökünüz belgelendirme için, diğeriniz ise pazarlama sayfanız için olabilir.

Daha ayrıntılı kontrol için, kökenleri 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ı dizeyi farklı kökenlerde farklı çeviriler alabileceğini unutmayın.

Sonunda, dizeleri kökenlere nasıl ayıracağınız size ve ihtiyaçlarınıza bağlıdır. Ancak, tek bir kökende birçok dize bulundurmanın yükleme sürelerini artırabileceğini unutmayın.

Değişkenleri Yönetme

Dinamik içerikler için her zaman değişkenler kullanmalısınız, örneğin kullanıcı adları, tarihler, e-posta adresleri ve daha fazlası.

Dizelerdeki değişkenler, {{variable}} gibi çift köşeli parantezler kullanılarak tanımlanır.

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 işler. Ancak, useDangerouslySetInnerHTML değerini false olarak ayarlayarak bu davranıştan vazgeçebilirsiniz.

HTML renderedimini devre dışı bırakmak, kullanıcı tarafından oluşturulan içerik gibi güvenilmeyen içerikleri çevirirken şiddetle önerilir.

Tüm çıktılar her zaman render edilmeden önce sanitize-html ile 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 işlenecektir.

Sunucu tarafı render alma

TacoTranslate Kullanımı

Dizelerin nasıl çevrildiği

Kökenlerin Kullanımı

Değişkenleri Yönetme

HTML içeriğini yönetme