Dokümantasyon: TacoTranslate Kullanımı

TacoTranslate Kullanımı

Turkish

Dizeleri çevirme

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

Translate bileşeninin kullanımı.
Çevirileri bir span öğesi içinde gösterir 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 öğ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ı 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 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ı anda, metniniz için yüksek kaliteli, son teknoloji bir yapay zeka çevirisi oluşturmak üzere asenkron bir çeviri işi başlatıyoruz. Yapay zeka çevirisi hazır olduğunda, makine çevirisinin yerini alacak ve metinlerinizin çevirilerini talep ettiğinizde gönderilecektir.

Bir dizeyi manuel olarak çevirdiyseniz, bu çeviriler öncelik taşır ve onun yerine 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>
	);
}

Orijinler dizeleri anlamlı kapsayıcılara ayırmanıza olanak tanır. Örneğin, dokümantasyon için bir orijin, pazarlama sayfanız için başka bir orijin olabilir.

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, dizeleri kaynaklara nasıl ayıracağınız size ve ihtiyaçlarınıza bağlıdır. Ancak, bir kaynaktaki çok sayıda dize yükleme sürelerini artırabilir.

Değişkenlerle Çalışma

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

Metin içindeki değişkenler çift süslü parantezler 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 İç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 değerini 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 tavsiye edilir.

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

Sunucu tarafı oluşturma

TacoTranslate Kullanımı

Dizelerin nasıl çevrildiği

Origin'leri kullanma

Değişkenlerle Çalışma

HTML İçeriğini Yönetme