Belgeler: TacoTranslate Kullanımı

TacoTranslate Kullanımı

Turkish

Dizeleri çevirmek

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

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

import {Translate} from 'tacotranslate/react';

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

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

useTranslation kancasının kullanımı.
Çevirileri düz bir metin olarak döner. Ö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 aracını kullanmak.
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 ve ardından hemen bir makine çevirisi döneriz. Makine çevirileri genellikle AI çevirilerimize kıyasla daha düşük kalitede olmasına rağmen, hızlı bir ilk yanıt sağlarlar.

Aynı zamanda, dizeniz için yüksek kaliteli, son teknoloji AI çevirisi oluşturmak üzere eşzamanlı olmayan bir çeviri işi başlatıyoruz. AI çevirisi hazır olduğunda, makine çevirisinin yerini alacak ve dizeleriniz için çeviri istediğiniz her zaman gönderilecektir.

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

Kökenlerin Kullanımı

TacoTranslate projeleri, bizim kaynaklar olarak adlandırdığımız şeyleri içerir. Bunları, dizgileriniz 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 kaynağı dokümantasyon için, diğerini ise pazarlama sayfanız için kullanabilirsiniz.

Daha ayrıntılı kontrol için, origin'leri bileşen seviyesinde ayarlayabilirsiniz.

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

Lütfen aynı dizenin farklı origins içinde farklı çeviriler alabileceğini unutmayın.

Sonuçta, dizeleri nasıl originlere 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şkenlerin Yönetimi

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

Değişkenler, stringlerde çift süslü parantez kullanılarak belirtilir, ö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ış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 güçlü bir şekilde önerilmektedir.

Tüm çıktı, sanitize-html ile her zaman temizlendikten sonra görüntü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 görüntülenecektir.

Sunucu tarafı renderlama

TacoTranslate Kullanımı

Dizelerin nasıl çevrildiği

Kökenlerin Kullanımı

Değişkenlerin Yönetimi

HTML içeriğini yönetme