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

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 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ın kullanımı.
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)
	};
}

Metinler sunucularımıza ulaştığında önce doğrulayıp kaydediyoruz, ardından hemen makine çevirisi döndürüyoruz. 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 eşzamansız bir çeviri işi başlatıyoruz. Yapay zeka çevirisi hazır olduğunda makine çevirisinin yerini alacak ve metinlerinizin çevirilerini talep ettiğinizde size gönderilecektir.

Bir dizeyi elle çevirdiyseniz, bu çeviriler öncelik taşır ve onlar döndürülür.

Orijinleri kullanma

TacoTranslate projeleri, bizim origin'ler dediğimiz öğeleri içerir. Bunları dizgeleriniz 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, dizelerinizi anlamlı kapsayıcılara ayırmanıza olanak tanır. Ö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, projenizde birden fazla TacoTranslate sağlayıcısı kullanmayı düşünebilirsiniz.

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 gibi dinamik içerikler için her zaman değişkenler kullanmalısınız.

Metinlerdeki 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 içeriğini yönetme

Varsayılan olarak, Translate bileşeni HTML içeriğini destekler ve görüntüler. 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üvenilir olmayan içerikleri çevirirken HTML işleme özelliğini devre dışı bırakmanız şiddetle önerilir.

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

TacoTranslate Kullanımı

Dizeler nasıl çevrilir

Orijinleri kullanma

Değişkenlerle çalışma

HTML içeriğini yönetme