เอกสาร: การใช้ 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 พร้อมใช้งานแล้ว มันจะแทนที่การแปลด้วยเครื่องจักร และจะถูกส่งให้ทุกครั้งที่คุณร้องขอการแปลสำหรับสตริงของคุณ

หากคุณได้แปลข้อความด้วยตนเอง การแปลเหล่านั้นจะมีความสำคัญมากกว่าและจะถูกส่งคืนแทน

การใช้งานต้นกำเนิด (Utilizing origins)

โครงการ TacoTranslate ประกอบด้วยสิ่งที่เราเรียกว่า origins ซึ่งเปรียบเสมือนจุดเริ่มต้น โฟลเดอร์ หรือกลุ่มสำหรับสตริงและการแปลของคุณ

import {TacoTranslate} from 'tacotranslate/react';

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

Origins ช่วยให้คุณแยกสตริงออกเป็นภาชนะที่มีความหมายได้ ตัวอย่างเช่น คุณอาจมี 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}
		/>
	);
}

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

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

การใช้ TacoTranslate

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

การใช้งานต้นกำเนิด (Utilizing origins)

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

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