Dokümantasyon: TacoTranslate Kullanımı

TacoTranslate Kullanımı

Turkish

Dizeleri çevirme

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

Translate bileşenini kullanma.
Çevirileri bir span öğesi içinde çıktı verir ve HTML render etmeyi destekler.

import {Translate} from 'tacotranslate/react';

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

Örneğin, komponent üzerinde as="p" kullanarak element tipini değiştirebilirsiniz.

useTranslation kancasının kullanımı.
Çevirileri düz bir metin 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ı kullanmak.
Sunucu tarafında dizeleri çevirin. OpenGraph resimlerinizi 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 onları doğrular ve kaydederiz, ardından hemen bir makine çevirisi döneriz. Makine çevirileri genellikle yapay zeka çevirilerimize kıyasla daha düşük kalitede olsa da, hızlı bir ilk yanıt sağlarlar.

Aynı anda, dizeniz için yüksek kaliteli, son teknoloji bir AI çevirisi oluşturmak üzere eşzamansız bir çeviri işi başlatıyoruz. AI çevirisi hazır olduğunda, makine çevirisinin yerine geçecek ve dizelerinizin çevirisini istediğinizde gönderilecektir.

Eğer bir dizgeyi manuel olarak çevirdiyseniz, bu çeviriler öncelikli olur ve yerine onlar döndürülür.

Origin'leri kullanma

TacoTranslate projeleri, bizim origin olarak adlandırdığımız şeyleri içerir. Bunları, metinleriniz ve çevirileriniz için giriş noktaları, klasörler veya gruplar olarak düşünebilirsiniz.

import {TacoTranslate} from 'tacotranslate/react';

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

Origins, dizeleri anlamlı kapsayıcılara ayırmanızı sağlar. Örneğin, bir origin dokümantasyon için, başka bir origin ise pazarlama sayfanız için olabilir.

Daha ayrıntılı kontrol için, component seviyesinde origins ayarlayabilirsiniz.

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

Lütfen aynı stringin farklı kaynaklarda farklı çeviriler alabileceğini unutmayın.

Sonuç olarak, dizeleri originlere nasıl ayıracağınız size ve ihtiyaçlarınıza bağlıdır. Ancak, 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

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

Değişkenler metinlerde çift köşeli 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ği destekler ve render eder. Ancak, bu davranıştan vazgeçmek için useDangerouslySetInnerHTML değerini false olarak ayarlayabilirsiniz.

HTML render'ını devre dışı bırakmak, kullanıcı tarafından oluşturulan içerik gibi güvenilmeyen içerikler çevrilirken şiddetle tavsiye edilir.

Tüm çıktı 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 render edilecektir.

Sunucu tarafı oluşturma

TacoTranslate Kullanımı

Metinler nasıl çevrilir

Origin'leri kullanma

Değişkenlerle Çalışma

HTML içeriğini yönetme