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