Шилдэг туршлагууд
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 ашиглаж байх үед л ажиллана.
Томоохон аппликейшн дээр ажиллаж байх үед, мөр ба орчуулгуудыг олон жижиг эх сурвалжид хуваах нь ашигтай байдаг. Энэ арга нь багцуудын хэмжээг багасгах, дамжуулалтын хугацааг хурдасгах замаар үр ашигтай бөгөөд өргөтгөх чадвартай орчуулгын үйл явцыг хангадаг.
Энэ нь зөвхөн клиент талд рендер хийх үед амархан байдаг ч, сервер талын рендерийн орчуулгыг татаж авахдаа эх сурвалжийн менежмент хурдан төвөгтэй болдог. Гэсэн хэдий ч, TacoTranslate клиентийн origins массивыг ашиглаж эх сурвалжийн менежментийг автоматжуулж болно.
Жишээ болгон, бид компонентууд болон хуудсуудыг тусдаа файлуудад хуваасан байгаа.
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 тухай.