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 ที่มีขนาดเล็กลง แนวทางนี้ช่วยลดขนาดบันเดิลและเวลาการโอนถ่ายข้อมูล ทำให้การทำโลคัลไลเซชันมีประสิทธิภาพและสามารถขยายได้ง่ายขึ้น.

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