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

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

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 ეტიკეტების გამოყენება

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