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.

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

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

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

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