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