Dokumentace: osvědčené postupy

Doporučené postupy

Czech

Ukládejte adresy URL do proměnných

Při překládání řetězců, které obsahují URL nebo podobná data, se doporučuje umístit tyto URL do proměnných a poté na ně ve svých šablonách odkazovat.

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

Použijte ARIA popisky

Při překladu textu interaktivních prvků, jako jsou tlačítka, je důležité uvádět štítky ARIA, aby byla zajištěna přístupnost. Štítky ARIA pomáhají čtečkám obrazovky poskytovat popisné informace o funkci prvku.

Například, pokud máte tlačítko, které umožňuje uživatelům zkopírovat text z kódového bloku, můžete použít atribut aria-label k poskytnutí jasného popisu:

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

Na tom je něco velmi meta.

Globální pole originů a více originů u komponent

Tento vzor funguje pouze při použití Next.js Pages Router.

Při práci s většími aplikacemi se vyplatí rozdělit řetězce a překlady do více menších originů. Tento přístup pomáhá snížit velikost balíčků a dobu přenosu, čímž zajišťuje efektivní a škálovatelnou lokalizaci.

Zatímco je to přímočaré při renderování pouze na straně klienta, správa originů se rychle stává složitou při získávání překladů pro renderování na straně serveru. Správu originů však můžete automatizovat pomocí pole klienta TacoTranslate origins.

Podívejte se na tento příklad, kde jsme rozdělili naše komponenty a stránky do samostatných souborů.

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

Pro více informací o getTacoTranslateStaticProps si prohlédněte naše příklady renderování na straně serveru.

Zpracování chyb a ladění