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 เท่านั้น

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

แม้ว่าจะทำได้ง่ายเมื่อทำการเรนเดอร์เฉพาะฝั่งไคลเอนต์เท่านั้น แต่การจัดการต้นกำเนิดจะซับซ้อนขึ้นอย่างรวดเร็วเมื่อดึงการแปลสำหรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ อย่างไรก็ตาม คุณสามารถทำให้อัตโนมัติในการจัดการต้นกำเนิดได้โดยใช้อาร์เรย์ 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});
}

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

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

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