เอกสารประกอบ: แนวทางปฏิบัติที่ดีที่สุด

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

Thai

วาง URL ลงในตัวแปร

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

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

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

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

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

บางอย่างเกี่ยวกับนี้รู้สึกเหมือนเป็นเรื่องเมตาอย่างมาก

อาเรย์ต้นทางระดับโลกและต้นทางหลายส่วนประกอบ

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

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

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

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

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.

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

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

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

อาเรย์ต้นทางระดับโลกและต้นทางหลายส่วนประกอบ