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

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

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

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