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 aracı.

Translate bileşenini kullanma.
Çevirileri span öğesi içinde çıktılar ve HTML görüntülemeyi destekler.

import {Translate} from 'tacotranslate/react';

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

Eleman tipini, örneğin, as="p" kullanarak bileşen üzerinde değiştirebilirsiniz.

useTranslation kancasını kullanma.
Çevirileri düz bir dize olarak döner. Örneğin, meta etiketlerinde yararlı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ı kullanma.
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)
	};
}

Stringler sunucularımıza ulaştığında, önce bunları doğrulayıp kaydediyoruz, ardından hemen bir makine çevirisi döndürüyoruz. Makine çevirileri genellikle AI çevirilerimize kıyasla daha düşük kalitede olsa da, hızlı bir başlangıç yanıtı sağlarlar.

Aynı anda, string'iniz için yüksek kaliteli, son teknoloji AI çevirisi oluşturmak üzere asenkron bir çeviri işi başlatıyoruz. AI çevirisi hazır olduğunda, makine çevirisini değiştirecek ve string'leriniz için çeviri talep ettiğinizde gönderilecektir.

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

Kullanım kökenleri

TacoTranslate projeleri, kökenler olarak adlandırdığımız şeyleri içerir. Bunları, dizelerin ve çevirilerin giriş noktaları, klasörler veya grupları olarak düşünebilirsiniz.

import {TacoTranslate} from 'tacotranslate/react';

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

Kaynaklar, dizeleri anlamlı kaplara ayırmanıza olanak tanır. Örneğin, belgeler için bir kaynak ve pazarlama sayfanız için başka bir kaynak oluşturabilirsiniz.

Daha ayrıntılı kontrol için, bileşen seviyesinde kökenler oluşturabilirsiniz.

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

Lütfen aynı dizein farklı kökenlerde farklı çevirileri olabileceğini unutmayın.

Sonuçta, dizeleri kökenlere nasıl ayıracağınız size ve ihtiyaçlarınıza bağlıdır. Ancak, tek bir kökende birçok dize bulunmasının yükleme sürelerini artırabileceğini unutmayın.

Değişkenlerle başa çıkma

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

Kuyruk içindeki değişkenler, {{variable}} gibi çift 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 işler. Ancak, useDangerouslySetInnerHTML değerini false olarak ayarlayarak bu davranışı devre dışı bırakabilirsiniz.

HTML renderlemesini, kullanıcı tarafından üretilen içerik gibi güvenilmeyen içerikleri çevirirken devre dışı bırakmanız şiddetle önerilir.

Tüm çıktılar 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 görüntülenecektir.

Sunucu tarafında işleme

TacoTranslate Kullanımı

Dizelerin nasıl çevrildiği

Kullanım kökenleri

Değişkenlerle başa çıkma

HTML içeriğini yönetme