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

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

เก็บ URL ไว้ในตัวแปร

เมื่อแปลสตริงที่มี URL หรืข้อมูลลักษณะเดียวกัน ถือเป็นแนวปฏิบัติที่ดีที่จะเก็บ URL เหล่านั้นไว้ในตัวแปร แล้วอ้างอิงตัวแปรเหล่านั้นภายในเทมเพลตของคุณ

<Translate
	string={`Click <a href="{{url}}">here</a>`}
	variables={{url: 'https://tacotranslate.com'}}
/>

ใช้ป้ายกำกับ ARIA

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

ตัวอย่างเช่น หากคุณมีปุ่มที่ให้ผู้ใช้คัดลอกข้อความจากบล็อกโค้ด คุณสามารถใช้แอตทริบิวต์ aria-label เพื่อให้คำอธิบายที่ชัดเจน:

<Translate
	aria-label={useTranslation('Copy to clipboard')}
	string="Copy"
/>

บางอย่างเกี่ยวกับเรื่องนี้ให้ความรู้สึกว่าเมตาเป็นพิเศษ

อาร์เรย์ต้นทางระดับโลกและต้นทางหลายรายการสำหรับคอมโพเนนต์

รูปแบบนี้จะใช้ได้เฉพาะเมื่อใช้ Next.js Pages Router.

เมื่อทำงานกับแอปพลิเคชันขนาดใหญ่ จะเป็นประโยชน์หากแยกสตริงและคำแปลออกเป็นหลายๆ ต้นทางที่มีขนาดเล็กลง วิธีนี้ช่วยลดขนาดบันเดิลและเวลาในการส่งข้อมูล ทำให้การแปลมีประสิทธิภาพและรองรับการขยายตัวได้ดีขึ้น

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

พิจารณาตัวอย่างนี้ ซึ่งเราได้แยกคอมโพเนนต์และเพจของเราออกเป็นไฟล์แยกกัน

components/pricing-table.tsx
import TacoTranslate, {Translate} from 'tacotranslate/react';
import tacoTranslate from '../tacotranslate-client';

// Set an origin name for this component
const origin = 'components/pricing-table';

// Push the origin into the origins array as this file is imported
tacoTranslate.origins.push(origin);

export default function PricingTable() {
	return (
		<TacoTranslate origin={origin}>
			<Translate string="Pricing table" />
			// ...
		</TacoTranslate>
	);
}
pages/pricing.tsx
import TacoTranslate, {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';
import PricingTable from '../components/pricing-table';

const origin = 'pages/pricing';
tacoTranslateClient.origins.push(origin);

export default function PricingPage() {
	return (
		<TacoTranslate origin={origin}>
			<Translate string="Pricing page" />
			<PricingTable />
		</TacoTranslate>
	);
}

// We will now fetch translations for all imported components and their origins automatically
export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

ดู ตัวอย่างการเรนเดอร์ฝั่งเซิร์ฟเวอร์ ของเรา สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ getTacoTranslateStaticProps.

การจัดการข้อผิดพลาดและการดีบัก

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