แนวทางปฏิบัติที่ดีที่สุด
ใส่ 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
ลองพิจารณาตัวอย่างนี้ ซึ่งเราได้แยกคอมโพเนนต์และหน้าออกเป็นไฟล์แยกกันแล้ว
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});
}
ดูตัวอย่างการเรนเดอร์ฝั่งเซิร์ฟเวอร์ของเราได้ที่ server-side rendering examples สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ getTacoTranslateStaticProps
.