Баримт бичиг: 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)
	};
}

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

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

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

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

Эх сурвалжуудыг ашиглах

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

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

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

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