TacoTranslate
/
เอกสารประกอบราคา
 
  1. บทนำ
  2. เริ่มต้นใช้งาน
  3. การตั้งค่าและการกำหนดค่า
  4. การใช้งาน TacoTranslate
  5. การเรนเดอร์ฝั่งเซิร์ฟเวอร์
  6. การใช้งานขั้นสูง
  7. แนวทางปฏิบัติที่ดีที่สุด
  8. การจัดการข้อผิดพลาดและการดีบัก
  9. ภาษาที่รองรับ

การใช้งานขั้นสูง

การรองรับภาษาที่เขียนจากขวาไปซ้าย

TacoTranslate ช่วยให้การรองรับภาษาที่เขียนจากขวาไปซ้าย (RTL) เช่น ภาษาอาหรับและภาษาฮีบรู ในแอป React ของคุณเป็นเรื่องง่าย การจัดการภาษา RTL อย่างถูกต้องจะช่วยให้เนื้อหาของคุณแสดงผลอย่างถูกต้องสำหรับผู้ใช้ที่อ่านจากขวาไปซ้าย

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

คุณยังสามารถใช้ฟังก์ชัน isRightToLeftLocaleCode ที่มีให้เพื่อตรวจสอบภาษาปัจจุบันนอก React ได้ด้วย.

import {isRightToLeftLocaleCode} from 'tacotranslate';

function foo(locale = 'es') {
	const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
	// ...
}

ปิดการแปล

หากต้องการปิดการแปลสำหรับส่วนเฉพาะของสตริงหรือเพื่อให้มั่นใจว่าส่วนบางส่วนจะคงไว้ตามเดิม คุณสามารถใช้วงเล็บเหลี่ยมสามชุดได้ ฟีเจอร์นี้มีประโยชน์ในการรักษารูปแบบต้นฉบับของชื่อ คำศัพท์ทางเทคนิค หรือเนื้อหาอื่น ๆ ที่ไม่ควรถูกแปล

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

ในตัวอย่างนี้ คำว่า “TacoTranslate” จะยังคงไม่ถูกเปลี่ยนแปลงในการแปล

ผู้ให้บริการ TacoTranslate หลายราย

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

คุณสามารถ อ่านเพิ่มเติมเกี่ยวกับการใช้แหล่งที่มาได้ที่นี่.

TacoTranslate ผู้ให้บริการจะสืบทอดการตั้งค่าจากผู้ให้บริการต้นทาง ดังนั้นคุณจึงไม่จำเป็นต้องทำซ้ำการตั้งค่าอื่นๆ

import createTacoTranslateClient from 'tacotranslate';
import {TacoTranslate} from 'tacotranslate/react';

const tacoTranslateClient = createTacoTranslateClient({apiKey: 'YOUR_API_KEY'});

function Header() {
	return (
		<TacoTranslate origin="header">
			// ...
		</TacoTranslate>
	);
}

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

export default function App() {
	return (
		<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
			<Header />
			<Menu />
		</TacoTranslate>
	);
}

การเขียนทับ origin หรือ locale

นอกเหนือจากการใช้ผู้ให้บริการ TacoTranslate หลายรายการแล้ว คุณยังสามารถเขียนทับทั้ง origin และ locale ในระดับคอมโพเนนต์ Translate และฮุก useTranslation.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

การจัดการการโหลด

เมื่อเปลี่ยนภาษาในฝั่งไคลเอนต์ การดึงคำแปลอาจใช้เวลาสักครู่ ขึ้นอยู่กับการเชื่อมต่อของผู้ใช้ คุณสามารถแสดงตัวบ่งชี้การโหลดเพื่อปรับปรุงประสบการณ์ผู้ใช้ด้วยการให้ข้อมูลตอบสนองเชิงภาพในระหว่างการสลับ

import {useTacoTranslate} from 'tacotranslate/react';

function Component() {
	const {isLoading} = useTacoTranslate();

	return (
		isLoading ? 'Translations are loading...' : null
	);
}

การจัดการพหูพจน์

เพื่อจัดการการผันพหูพจน์และการแสดงป้ายที่อิงจำนวนให้ถูกต้องในภาษาต่างๆ นี่ถือเป็นแนวปฏิบัติที่ดีที่สุด:

import {Translate, useLocale} from 'tacotranslate/react';

function PhotoCount() {
	const locale = useLocale();
	const count = 1;

	return count === 0 ? (
		<Translate string="You have no photos." />
	) : count === 1 ? (
		<Translate string="You have 1 photo." />
	) : (
		<Translate
			string="You have {{count}} photos."
			variables={{count: count.toLocaleString(locale)}}
		/>
	);
}

หลายภาษา

เพื่อรองรับหลายภาษาในแอปพลิเคชันเดียวกันพร้อมกัน คุณสามารถ ใช้ผู้ให้บริการ TacoTranslate หลายตัว โดยมีค่า locale แตกต่างกัน ดังตัวอย่างด้านล่าง:

คุณยังสามารถแทนที่ locale ในระดับคอมโพเนนต์หรือฮุก.

import createTacoTranslateClient from 'tacotranslate';
import {TacoTranslate, Translate} from 'tacotranslate/react';

const tacoTranslateClient = createTacoTranslateClient({apiKey: 'YOUR_API_KEY'});

function Spanish() {
	return (
		<TacoTranslate locale="es">
			<Translate string="Hello, world in Spanish!" />
		</TacoTranslate>
	);
}

function Norwegian() {
	return (
		<TacoTranslate locale="no">
			<Translate string="Hello, world in Norwegian!" />
		</TacoTranslate>
	);
}

export default function App() {
	return (
		<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
			<Spanish />
			<Norwegian />
		</TacoTranslate>
	);
}

การใช้ ID การแปล

คุณสามารถเพิ่ม id ลงในคอมโพเนนต์ Translate เพื่อจัดการการแปลหรือความหมายที่แตกต่างสำหรับข้อความเดียวกันได้। สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อข้อความเดียวกันต้องการการแปลที่แตกต่างกันตามบริบท คุณสามารถกำหนด id ที่ไม่ซ้ำกัน เพื่อให้มั่นใจว่าแต่ละกรณีของข้อความจะได้รับการแปลอย่างถูกต้องตามความหมายเฉพาะของมัน

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

ตัวอย่างเช่น ปุ่มเข้าสู่ระบบในส่วนหัวอาจแปลเป็น “Iniciar sesión” และปุ่มเข้าสู่ระบบในส่วนท้ายอาจแปลเป็น “Acceder” ในภาษาสเปน

แนวทางปฏิบัติที่ดีที่สุด

ผลิตภัณฑ์จาก Nattskiftetผลิตในนอร์เวย์