Belgeler: TacoTranslate Kullanımı

TacoTranslate Kullanımı

Turkish

Dizeleri çevirme

Şu anda metinleri ç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'ını destekler.

import {Translate} from 'tacotranslate/react';

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

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

useTranslation hook'unu kullanmak.
Çevirileri düz metin 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ı programını kullanmak.
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)
	};
}

Dizeler sunucularımıza ulaştığında, önce onları doğrular ve kaydederiz, ardından hemen bir makine çevirisi döneriz. Makine çevirileri genel olarak 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, en son teknoloji 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 dizeleriniz için çeviri istediğinizde gönderilecektir.

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

Kökenlerin Kullanımı

TacoTranslate projeleri, bizim origins dediğimiz şeyleri içerir. Onları, 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, metinleri anlamlı kapsayıcılar halinde ayırmanıza olanak tanır. Örneğin, dokümantasyon için bir origin, pazarlama sayfanız için başka bir origin kullanabilirsiniz.

Daha ayrıntılı kontrol için, kökenleri 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ı originlerde 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 kaynakta çok sayıda dize bulunmasının yükleme sürelerini artırabileceğini unutmayın.

Değişkenleri Yönetme

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

Metinlerdeki değişkenler, {{variable}} gibi çift süslü parantez kullanılarak tanımlanır.

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, useDangerouslySetInnerHTML değerini false yaparak bu davranıştan vazgeçebilirsiniz.

Kullanıcı tarafından oluşturulan içerik gibi güvenilmeyen içeriği çevirirken HTML render'ını devre dışı bırakmak şiddetle önerilir.

Tüm çıktı, her zaman sanitize-html ile temizlenir ve ardından 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 render edilecektir.

Sunucu tarafı render etme

TacoTranslate Kullanımı

Stringler nasıl çevrilir

Kökenlerin Kullanımı

Değişkenleri Yönetme

HTML içeriğini yönetme