Шилдэг туршлагууд
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 тухай манай сервер талын рендерийн жишээнүүд-ийг үзнэ үү.