Dokimantasyon: Pi bon pratik

Pi bon pratik

Haitian Creole

Mete URL yo nan varyab

Lè w ap tradui chenn ki gen URL oswa done menm jan an, li konsidere kòm yon bon pratik pou mete URL sa yo andedan varyab epi apre sa fè referans ak yo nan modèl ou yo.

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

Lè w ap tradui tèks eleman entèaktif tankou bouton, li enpòtan pou enkli etikèt ARIA pou asire aksè fasil. Etikèt ARIA ede lektè ekran yo bay enfòmasyon deskriptif sou fonksyon eleman an.

Pa egzanp, si ou gen yon bouton ki pèmèt itilizatè yo kopye tèks nan yon blòk kòd, ou ka itilize atribi aria-label pou bay yon deskripsyon klè:

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

Gen yon bagay nan sa a ki santi li trè meta.

Tablo mondyal orijin ak plizyè orijin konpozan

Modèl sa a sèlman mache lè w ap itilize Next.js Pages Router.

Lè w ap travay ak aplikasyon ki pi gwo, li benefik pou divize chenn karaktè yo ak tradiksyon yo nan plizyè sous ki pi piti. Apwòch sa a ede diminye gwosè pake yo ak tan transfè yo, asire yon lokalizasyon efikas ak echèl.

Pandan ke sa a senp lè w ap rann sèlman sou bò kliyan an, jere sous yo vin rapidman konplike lè w ap pran tradiksyon pou rann sou bò sèvè a. Sepandan, ou ka otomatikman jere sous yo lè w itilize tablo origins nan kliyan TacoTranslate a.

Gade egzanp sa a, kote nou te separe konpozan nou yo ak paj yo nan fichye diferan.

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

Gade egzanp rannman sou sèvè a nou yo pou plis enfòmasyon sou getTacoTranslateStaticProps.

Jesyon erè ak débogaj

Pi bon pratik

Itilize etikèt ARIA

Tablo mondyal orijin ak plizyè orijin konpozan