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

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

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 шошгуудыг ашиглах

Глобал эх үүсвэрүүдийн массив ба олон компонентын эх үүсвэрүүд