Баримтжуулалт: TacoTranslate ашиглах

TacoTranslate ашиглах

Mongolian

Стрингүүдийг орчуулах

Одоогоор стрингүүдийг орчуулах гурван арга байна: Translate компонент, useTranslation хук, эсвэл translateEntries хэрэгсэл.

Translate компонентыг ашиглах.
Орчуулгыг span элемент дотор гаргадаг бөгөөд HTML-г дүрслэхийг дэмжнэ.

import {Translate} from 'tacotranslate/react';

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

Жишээлбэл, компонент дээр as="p" ашиглан элементийн төрлийг өөрчилж болно.

useTranslation хукыг ашиглах.
Орчууллыг энгийн мөр хэлбэрээр буцаана. Жишээ нь, meta тагуудад ашиглахад тохиромжтой.

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 хэрэгслийг ашиглах.
Стрингүүдийг сервер талд орчуулна. Таны OpenGraph зургуудыг илүү хүчирхэг болгоно.

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

Тэмдэгт мөрүүд хэрхэн орчуулагддаг

Стрингууд манай серверт ирэхэд бид эхлээд тэднийг баталгаажуулж хадгалдаг бөгөөд дараа нь даруй машин орчуулгыг буцаан өгдөг. Машин орчуулгууд ерөнхийдөө манай AI орчуулгуудтай харьцуулахад чанар багатай байх боловч эхний хурдан хариу болж өгдөг.

Үүний зэрэгцээ бид таны стрингийн өндөр чанартай, хамгийн дэвшилтэт AI орчуулгыг үүсгэх зорилготой асинхрон орчуулгын ажлыг эхлүүлдэг. AI орчуулга бэлэн болсны дараа үүнийг машин орчуулгын оронд сольж, таны стрингүүдийн орчуулгыг хүссэн үед тань илгээнэ

Хэрэв та мөрийг гараар орчуулсан бол тухайн орчуулгууд давуу эрхтэй тооцогдож, оронд нь буцаагдана.

Эх үүсвэрүүдийг ашиглах

TacoTranslate төслүүд нь бид эх үүсвэрүүд гэж нэрлэдэг зүйлсийг агуулдаг. Эдгээрийг өөрийн тэмдэгт мөрүүд болон орчуулгын хувьд орох цэг, хавтас эсвэл бүлэг гэж үзээрэй.

import {TacoTranslate} from 'tacotranslate/react';

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

Эх үүсвэрүүд нь текст мөрүүдийг утга учир бүхий бүлгүүдэд тусгаарлах боломжийг олгодог. Жишээлбэл, баримт бичгийн нэг эх үүсвэр, харин маркетингийн хуудасны өөр эх үүсвэр байж болно.

Илүү нарийвчилсан хяналт хэрэгтэй бол компонентын түвшинд origins-ыг тохируулж болно.

Үүнийг хэрэгжүүлэхийн тулд төсөлдөө хэд хэдэн TacoTranslate провайдер ашиглахыг бодоорой.

Анхаарна уу: ижил мөр нь өөр эх сурвалжуудад өөр орчуулалтаар ирж болно.

Эцэст нь, тэмдэгт мөрүүдийг origin-үүдэд хэрхэн ангилах нь таны болон таны хэрэгцээнээс хамаарна. Гэсэн хэдий ч нэг origin-д олон тэмдэгт мөр байх нь ачааллах хугацааг уртасгаж болзошгүйг анхаараарай.

Хувьсагчидтай ажиллах

Хэрэглэгчийн нэр, огноо, имэйл хаяг зэрэг динамик агуулгын хувьд та үргэлж хувьсагч ашиглах хэрэгтэй.

Стрингүүд дэх хувьсагчдыг давхар хаалт ашиглан зарлана, жишээ нь {{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 агуулгыг удирдах

Анхдагчаар, Translate компонент HTML агуулгыг дэмжиж, рендерлэдэг. Гэхдээ та энэ зан үйлийг идэвхгүй болгох боломжтой — үүний тулд useDangerouslySetInnerHTML-ийг false болгон тогтооно.

Хэрэглэгчийн үүсгэсэн агуулга гэх мэт итгэлгүй агуулгыг орчуулах үед HTML-г дүрслэхийг идэвхгүй болгохыг хатуу зөвлөж байна.

Бүх гаралт нь үзүүлэгдэхийн өмнө үргэлж sanitize-html ашиглан цэвэрлэгддэг.

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

Дээрх жишээ энгийн текст хэлбэрээр үзэгдэх болно.

Сервер талын рендеринг