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

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

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

โปรดทราบว่า string เดียวกันอาจได้รับการแปลที่แตกต่างกันใน 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}
		/>
	);
}

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

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