Dokümantasyon: TacoTranslate Kullanımı

TacoTranslate kullanarak

Turkish

Stringleri çevirme

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

Translate bileşenini kullanma.
Çevirileri span elemanının içinde çıktı verir ve HTML'i görüntüleyecek şekilde destekler.

import {Translate} from 'tacotranslate/react';

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

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

useTranslation kancası kullanımı.
Çevirileri düz bir string olarak döner. Ö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.
Sunucu tarafında dizeleri ç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 bunları doğruluyor ve 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 ilk yanıt sunarlar.

Aynı anda, dizeniz için yüksek kaliteli, en son teknolojiye sahip bir AI çevirisi oluşturmak üzere asenkron bir çeviri işi başlatıyoruz. AI çevirisi hazır olduğunda, makine çevirisini değiştirecek ve dizeleriniz için çeviriler talep ettiğinizde gönderilecektir.

Eğer bir dizeyi manuel olarak çevirdiyseniz, bu çeviriler öncelikli olarak alınır ve döndürülür.

Kökenleri kullanma

TacoTranslate projeleri, kökler olarak adlandırdığımız şeyleri içerir. Bunları, dizelerin ve çevirilerinizin giriş noktaları, klasörler veya grupları olarak düşünün.

import {TacoTranslate} from 'tacotranslate/react';

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

Kaynaklar, dizeleri anlamlı kaplara ayırmanıza olanak tanır. Örneğin, belgeler için bir kaynak ve pazarlama sayfanız için başka bir kaynak oluşturabilirsiniz.

Daha ayrıntılı kontrol için, bileşen seviyesinde kökenler ayarlayabilirsiniz.

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

Lütfen unutmayın ki aynı dize farklı kökenlerde farklı çeviriler alabilir.

Sonuçta, dizeleri kökenlere ayırma şekli tamamen size ve ihtiyaçlarınıza bağlıdır. Ancak, bir köken içinde çok sayıda dize bulunmasının yükleme sürelerini artırabileceğini unutmayın.

Değişkenleri İşleme

Dinamik içerik için, örneğin kullanıcı adları, tarihler, e-posta adresleri gibi değişkenler kullanmalısınız.

Dizelerdeki değişkenler çift parantez ile 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 işler. Ancak, bunu engellemek için useDangerouslySetInnerHTML değerini false olarak ayarlayabilirsiniz.

HTML renderleme özelliğini devre dışı bırakmak, kullanıcı tarafından oluşturulan içerik gibi güvenilir olmayan içeriği çevirirken şiddetle tavsiye edilir.

Tüm çıktılar her zaman sanitize-html ile temizlenmeden önce işlenir.

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 render edilecektir.

Sunucu tarafı renderleme

TacoTranslate kullanarak

Kelimelerin nasıl çevrildiği

Kökenleri kullanma

Değişkenleri İşleme

HTML içeriğini yönetme