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