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