Баримт бичиг: Шилдэг туршлагууд

Шилдэг туршлагууд

Mongolian

URL-уудыг хувьсагчид хадгалах

URL эсвэл түүнтэй ижил төрлийн өгөгдөл агуулсан мөрүүдийг орчуулахдаа эдгээр URL-үүдийг хувьсагчид хадгалаад загварууддаа ишлэн ашиглах нь сайн дадал гэж үздэг.

<Translate
	string={`Click <a href="{{url}}">here</a>`}
	variables={{url: 'https://tacotranslate.com'}}
/>

Дараах интерактив элементүүдийн (жишээ нь товчлуурууд) текстийг орчуулахдаа хүртээмжийг хангахын тулд ARIA шошгуудыг оруулах нь чухал. ARIA шошгууд дэлгэц уншигчдэд тухайн элементийн үүргийг тодорхой тайлбарлан өгөхөд тусалдаг.

Жишээ нь, хэрэв таны кодын блокоос текст хуулж авах боломжтой товч байгаа бол тодорхой тайлбар өгөх үүднээс aria-label атрибутыг ашиглаж болно:

<Translate
	aria-label={useTranslation('Copy to clipboard')}
	string="Copy"
/>

Энэ нь ямар нэг талаараа ихээхэн мета мэт санагдаж байна.

Глобал эх үүсвэрийн массив ба олон бүрэлдэхүүн хэсгийн эх үүсвэрүүд

Энэхүү хэв маяг зөвхөн Next.js Pages Router ашиглах үед ажиллана.

Их хэмжээний програмууд дээр ажиллах үед стрингүүд болон орчуулгуудыг олон, жижиг эх үүсвэрүүд болгон хуваах нь ашигтай. Энэ арга нь багцын хэмжээг болон дамжуулах хугацааг бууруулж, орчуулгыг үр ашигтай, өргөтгөх боломжтой болгодог.

Энэ нь зөвхөн клиент тал дээр дүрслэх үед энгийн байдаг; харин сервер талын дүрслэлдээ зориулан орчуулгуудыг татах үед эх үүсвэрүүдийг удирдах нь хурдан төвөгтэй болдог. Гэсэн хэдий ч та TacoTranslate клиентын origins массивыг ашиглан эх үүсвэрийн удирдлагыг автоматжуулж болно.

Компонентууд болон хуудсуудыг тусдаа файлуудад салгасан дараах жишээг авч үзнэ үү.

components/pricing-table.tsx

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>
	);
}

pages/pricing.tsx

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

Алдааны удирдлага ба алдааг оношлох

Шилдэг туршлагууд

ARIA шошгуудыг ашиглах

Глобал эх үүсвэрийн массив ба олон бүрэлдэхүүн хэсгийн эх үүсвэрүүд