เอกสารประกอบ: การใช้ TacoTranslate

การใช้ TacoTranslate

Thai

การแปลสตริง

ปัจจุบันมีสามวิธีในการแปลสตริง: คอมโพเนนต์ 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>
	);
}

Origins ช่วยให้คุณแยก strings ออกเป็นกลุ่มที่มีความหมายได้ ตัวอย่างเช่น คุณสามารถมี origin หนึ่งสำหรับเอกสาร และอีก origin หนึ่งสำหรับหน้าการตลาดของคุณได้

สำหรับการควบคุมที่ละเอียดขึ้น คุณสามารถตั้งค่า origins ในระดับคอมโพเนนต์ได้ครับ

เพื่อให้บรรลุเป้าหมายนี้ ให้พิจารณา ใช้ผู้ให้บริการ TacoTranslate หลายราย ภายในโครงการของคุณ

โปรดทราบว่า the same string อาจได้รับการแปลต่างกันใน different origins

สุดท้ายแล้ว วิธีที่คุณแยกสตริงออกเป็น 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}
		/>
	);
}

ตัวอย่างข้างต้นจะแสดงผลเป็นข้อความธรรมดา (plain text)

การเรนเดอร์ฝั่งเซิร์ฟเวอร์

การใช้ TacoTranslate

วิธีการแปลสตริง

การใช้ต้นทาง

การจัดการตัวแปร

การจัดการเนื้อหา HTML