Dokümantasyon: TacoTranslate Kullanımı

TacoTranslate Kullanımı

Turkish

Dizeleri çevirme

Şu anda dizeleri çevirmenin üç yolu vardır: Translate bileşeni, useTranslation kancası veya translateEntries yardımcı aracı.

Translate bileşenini kullanma.
Çevirileri bir span öğesi içinde gösterir 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 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.
Metinleri 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)
	};
}

Metinler sunucularımıza ulaştığında, önce onları 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 kalitededir, ancak hızlı bir ilk yanıt sağlar.

Aynı anda, 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 metinlerinizin çevirisini istediğinizde gönderilecektir.

Bir dizeyi manuel olarak çevirdiyseniz, bu çeviriler önceliklidir ve onlar döndürülür.

Origin'leri kullanma

TacoTranslate projeleri, bizim origins dediğimiz öğeleri içerir. Bunları 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, dokümantasyon için bir origin, pazarlama sayfanız için ise başka bir origin kullanabilirsiniz.

Daha ayrıntılı kontrol sağlamak 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ı originlerde farklı çeviriler alabileceğini unutmayın.

Sonuç olarak, dizeleri origin'lere nasıl ayıracağınız size ve ihtiyaçlarınıza bağlıdır. Bununla birlikte, 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ü parantez 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 render eder. 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üvenilmeyen içeriği çevirirken HTML renderlemesinin devre dışı bırakılması şiddetle önerilir.

Tüm çıktı, 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 içeriğini yönetme