Баримт бичиг: TacoTranslate ашиглах

TacoTranslate-ийг ашиглах

Mongolian

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

Одоогоор тэмдэгт мөрүүдийг орчуулах гурван арга байна: Translate компонент, useTranslation hook, эсвэл 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 орчуулгатай харьцуулахад чанар багатай байдаг ч тэд анхны хурдан хариулт өгдөг.

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

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

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

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

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

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

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

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

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

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

Тэмдэгт мөр дэх хувьсагчуудыг хоёр давхар хаалт ашиглан зарлана, жишээ нь {{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}
		/>
	);
}

Дээрх жишээг цэвэр текст хэлбэрээр харуулах болно.

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