Τεκμηρίωση: Προχωρημένη χρήση

Προχωρημένη χρήση

Greek

Διαχείριση γλωσσών από δεξιά προς αριστερά

TacoTranslate καθιστά εύκολη την υποστήριξη γλωσσών που γράφονται από δεξιά προς τα αριστερά (RTL), όπως τα Αραβικά και τα Εβραϊκά, στις εφαρμογές React σας. Η σωστή διαχείριση των RTL γλωσσών εξασφαλίζει ότι το περιεχόμενό σας εμφανίζεται σωστά για τους χρήστες που διαβάζουν από δεξιά προς τα αριστερά.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

Μπορείτε επίσης να χρησιμοποιήσετε τη διαθέσιμη isRightToLeftLocaleCode συνάρτηση για να ελέγξετε την τρέχουσα γλώσσα εκτός του React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

function foo(locale = 'es') {
	const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
	// ...
}

Απενεργοποίηση μετάφρασης

Για να απενεργοποιήσετε τη μετάφραση για συγκεκριμένα μέρη μιας συμβολοσειράς ή για να διασφαλίσετε ότι ορισμένα τμήματα θα διατηρηθούν ως έχουν, μπορείτε να χρησιμοποιήσετε τριπλές τετράγωνες αγκύλες. Αυτή η λειτουργία είναι χρήσιμη για τη διατήρηση της πρωτότυπης μορφής ονομάτων, τεχνικών όρων ή οποιουδήποτε άλλου περιεχομένου που δεν πρέπει να μεταφραστεί.

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

Σε αυτό το παράδειγμα, η λέξη “TacoTranslate” θα παραμείνει αμετάβλητη στη μετάφραση.

Πολλαπλοί πάροχοι TacoTranslate

Σας συνιστούμε θερμά να χρησιμοποιήσετε πολλαπλούς TacoTranslate παρόχους στην εφαρμογή σας. Αυτό είναι χρήσιμο για την οργάνωση των μεταφράσεων και των συμβολοσειρών σας σε διαφορετικές προελεύσεις, όπως στην επικεφαλίδα σας, στο υποσέλιδο ή σε συγκεκριμένες ενότητες.

Μπορείτε να διαβάσετε περισσότερα σχετικά με τη χρήση των προελεύσεων εδώ.

Οι πάροχοι του TacoTranslate κληρονομούν τις ρυθμίσεις από οποιονδήποτε γονικό πάροχο, οπότε δεν θα χρειαστεί να επαναλάβετε άλλες ρυθμίσεις.

import createTacoTranslateClient from 'tacotranslate';
import {TacoTranslate} from 'tacotranslate/react';

const tacoTranslateClient = createTacoTranslateClient({apiKey: 'YOUR_API_KEY'});

function Header() {
	return (
		<TacoTranslate origin="header">
			// ...
		</TacoTranslate>
	);
}

function Menu() {
	return (
		<TacoTranslate origin="menu">
			// ...
		</TacoTranslate>
	);
}

export default function App() {
	return (
		<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
			<Header />
			<Menu />
		</TacoTranslate>
	);
}

Παράκαμψη προέλευσης ή τοπικής ρύθμισης

Εκτός από τη χρήση πολλαπλών TacoTranslate παρόχων, μπορείτε επίσης να παρακάμψετε τόσο την προέλευση όσο και το locale στο επίπεδο του συστατικού Translate και του hook useTranslation.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

Διαχείριση φόρτωσης

Όταν αλλάζετε γλώσσες στην πλευρά του πελάτη, η λήψη των μεταφράσεων μπορεί να χρειαστεί μερικά δευτερόλεπτα ανάλογα με τη σύνδεση του χρήστη. Μπορείτε να εμφανίσετε έναν δείκτη φόρτωσης για να βελτιώσετε την εμπειρία του χρήστη παρέχοντας οπτική ανατροφοδότηση κατά τη διάρκεια της εναλλαγής.

import {useTacoTranslate} from 'tacotranslate/react';

function Component() {
	const {isLoading} = useTacoTranslate();

	return (
		isLoading ? 'Translations are loading...' : null
	);
}

Πληθυντικός

Για να χειριστείτε σωστά τον πληθυντικό και να εμφανίζετε ετικέτες βάσει αριθμού σε διαφορετικές γλώσσες, αυτό θεωρείται βέλτιστη πρακτική:

import {Translate, useLocale} from 'tacotranslate/react';

function PhotoCount() {
	const locale = useLocale();
	const count = 1;

	return count === 0 ? (
		<Translate string="You have no photos." />
	) : count === 1 ? (
		<Translate string="You have 1 photo." />
	) : (
		<Translate
			string="You have {{count}} photos."
			variables={{count: count.toLocaleString(locale)}}
		/>
	);
}

Πολλαπλές γλώσσες

Για να υποστηρίξετε πολλαπλές γλώσσες ταυτόχρονα στην ίδια εφαρμογή, μπορείτε να χρησιμοποιήσετε πολλούς παρόχους TacoTranslate με διαφορετικές locale τιμές όπως φαίνεται παρακάτω:

Μπορείτε επίσης να παρακάμψετε το locale σε επίπεδο component ή hook.

import createTacoTranslateClient from 'tacotranslate';
import {TacoTranslate, Translate} from 'tacotranslate/react';

const tacoTranslateClient = createTacoTranslateClient({apiKey: 'YOUR_API_KEY'});

function Spanish() {
	return (
		<TacoTranslate locale="es">
			<Translate string="Hello, world in Spanish!" />
		</TacoTranslate>
	);
}

function Norwegian() {
	return (
		<TacoTranslate locale="no">
			<Translate string="Hello, world in Norwegian!" />
		</TacoTranslate>
	);
}

export default function App() {
	return (
		<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
			<Spanish />
			<Norwegian />
		</TacoTranslate>
	);
}

Χρήση αναγνωριστικών μετάφρασης

Μπορείτε να προσθέσετε ένα id στο συστατικό Translate για να χειριστείτε διαφορετικές μεταφράσεις ή σημασίες για την ίδια συμβολοσειρά. Αυτό είναι ιδιαίτερα χρήσιμο όταν η ίδια συμβολοσειρά απαιτεί διαφορετικές μεταφράσεις ανάλογα με το πλαίσιο. Εκχωρώντας μοναδικά αναγνωριστικά, διασφαλίζετε ότι κάθε περίπτωση της συμβολοσειράς μεταφράζεται με ακρίβεια σύμφωνα με τη συγκεκριμένη της σημασία.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

Για παράδειγμα, η σύνδεση στην κεφαλίδα μπορεί να μεταφραστεί σε “Iniciar sesión”, και η σύνδεση στο υποσέλιδο μπορεί να μεταφραστεί σε “Acceder” στα ισπανικά.

Βέλτιστες πρακτικές