Dokümantasyon: TacoTranslate Kullanımı

TacoTranslate Kullanımı

Turkish

Dizeleri çevirme

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

Translate bileşenini kullanma.
Çevirileri bir span öğesi içinde çıktı olarak verir ve HTML 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 hook'unun kullanımı.
Çevirileri düz 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 yardım aracını kullanma.
Metinleri sunucu tarafında çevirin. OpenGraph görsellerinizi hızlandırın.

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)
	};
}

Dizgeler sunucularımıza ulaştığında, önce onları doğrular ve kaydederiz, ardından hemen bir makine çevirisi döneriz. Makine çevirileri genellikle AI çevirilerimize kıyasla daha düşük kalitede olsa da, hızlı bir ilk yanıt sağlarlar.

Aynı anda, stringiniz için yüksek kaliteli, son teknoloji AI çevirisi oluşturmak üzere eşzamansız bir çeviri işi başlatıyoruz. AI çevirisi hazır olduğunda, makine çevirisinin yerini alacak ve stringleriniz için çeviri talep ettiğinizde gönderilecektir.

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

Kökenleri Kullanma

TacoTranslate projeleri, bizim origin dediğimiz şeyleri içerir. Bunları, dizeleriniz 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ı konteynerlere ayırmanızı sağlar. Örneğin, belgeleriniz için bir origin ve pazarlama sayfanız için başka bir origin oluşturabilirsiniz.

Daha ayrıntılı kontrol için, kökenleri 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ı metnin farklı origins içinde farklı çeviriler alabileceğini unutmayın.

Sonuç olarak, dizeleri kaynaklara nasıl ayıracağınız size ve ihtiyaçlarınıza bağlıdır. Ancak, bir kaynağın içinde çok fazla 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 gibi, her zaman değişkenler kullanmalısınız.

Değişkenler, çift parantez kullanılarak stringlerde 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.

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

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

TacoTranslate Kullanımı

Dizelerin nasıl çevrildiği

Kökenleri Kullanma

Değişkenlerin Yönetimi

HTML içeriğini yönetme