Баримт бичиг: 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 орчуулга бэлэн болсноор энэ нь машин орчуулгыг орлож, таны текстийн орчуулгыг хүсэх бүрт илгээгдэнэ

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

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

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

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

Үүнийг хэрэгжүүлэхийн тулд төсөлдөө олон 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}
		/>
	);
}

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

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