แนวทางปฏิบัติที่ดีที่สุด
ใส่ 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"
/>บางอย่างเกี่ยวกับเรื่องนี้ให้ความรู้สึกว่าเมตามาก
อาร์เรย์ origins ระดับโลก และ origins หลายรายการสำหรับคอมโพเนนต์
รูปแบบนี้ใช้ได้เฉพาะเมื่อใช้งาน Next.js Pages Router.
เมื่อทำงานกับแอปพลิเคชันขนาดใหญ่ การแยกสตริงและการแปลออกเป็น origins เล็กๆ หลายๆ ชุดเป็นเรื่องที่เป็นประโยชน์ วิธีนี้ช่วยลดขนาดบันเดิลและเวลาในการถ่ายโอน ทำให้การปรับให้เหมาะสมกับท้องถิ่นมีประสิทธิภาพและขยายได้ง่ายขึ้น.
แม้ว่าจะเป็นเรื่องตรงไปตรงมาหากเรนเดอร์เฉพาะฝั่งไคลเอนต์ แต่การจัดการ origins จะซับซ้อนขึ้นอย่างรวดเร็วเมื่อดึงการแปลสำหรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ อย่างไรก็ตาม คุณสามารถทำให้การจัดการ origins เป็นอัตโนมัติโดยใช้อาร์เรย์ origins ของไคลเอนต์ TacoTranslate.
ลองพิจารณาตัวอย่างนี้ ซึ่งเราได้แยกคอมโพเนนต์และหน้าออกเป็นไฟล์แยกกัน.
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>
);
}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.