Шилдэг туршлагууд
URL-үүдийг хувьсагчид хадгалах
URL болон түүнтэй төсгөөр өгөгдлийг агуулсан мөрүүдийг орчуулахдаа эдгээр URL-үүдийг хувьсагчид хадгалаад шаблон дотор нихийг иш татан ашиглах нь сайн дадал гэж үздэг.
<Translate
string={`Click <a href="{{url}}">here</a>`}
variables={{url: 'https://tacotranslate.com'}}
/>ARIA шошго ашиглах
Товчлуур зэрэг интерактив элементүүдийн текстийг орчуулж байхдаа хандалтын боломжыг (accessibility) хангахын тулд 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 талаар дэлгэрэнгүй мэдээллийг үзнэ үү.