დოკუმენტაცია: საუკეთესო პრაქტიკები

საუკეთესო პრაქტიკები

Georgian

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 ლეიბლები

გლობალური საწყისი მასივი და მრავალი კომპონენტის საწყისი წერტილები