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

TacoTranslate ашиглах

Mongolian

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

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

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

import {Translate} from 'tacotranslate/react';

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

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

useTranslation hook-ийг ашиглах.
Орчуулгыг энгийн мөр болгон буцаана. Жишээлбэл, 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 төслүүдэд бид origins гэж нэрлэдэг зүйлс агуулагддаг. Эдгээрийг таны стрингүүд болон орчуулгуудын хувьд орох цэг, хавтас эсвэл бүлэг гэж үзэж болно.

import {TacoTranslate} from 'tacotranslate/react';

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

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

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

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

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

Эцэст нь, стрингүүдийг origins руу хэрхэн хуваах нь таны болон таны хэрэгцээнээс хамаарна. Гэсэн хэдий ч нэг 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}
		/>
	);
}

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

Сервер талын рендерлэлт

TacoTranslate ашиглах

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

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

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

HTML агуулгыг удирдах