Τεκμηρίωση: Χρήση του TacoTranslate

Χρήση του TacoTranslate

Greek

Μετάφραση συμβολοσειρών

Αυτή τη στιγμή υπάρχουν τρεις τρόποι για τη μετάφραση συμβολοσειρών: Το στοιχείο Translate, το hook useTranslation, ή το βοηθητικό εργαλείο translateEntries.

Χρήση του Translate συστατικού.
Εμφανίζει τις μεταφράσεις μέσα σε ένα στοιχείο span, και υποστηρίζει την απόδοση HTML.

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

Μπορείτε να αλλάξετε τον τύπο του στοιχείου χρησιμοποιώντας, για παράδειγμα, as="p" στο component.

Χρήση του useTranslation hook.
Επιστρέφει τις μεταφράσεις ως απλή συμβολοσειρά. Χρήσιμο, για παράδειγμα, σε meta ετικέτες.

import {useEffect} from 'react';
import {useTranslation} from 'tacotranslate/react';

function Page() {
	const helloWorld = useTranslation('Hello, world!');

	useEffect(() => {
		alert(helloWorld);
	}, [helloWorld]);

	return (
		<title>{useTranslation('My page title')}</title>
	);
}

Χρήση του βοηθητικού εργαλείου translateEntries.
Μεταφράστε συμβολοσειρές στην πλευρά του διακομιστή. Ενισχύστε τις εικόνες OpenGraph σας.

import {createEntry, translateEntries} from 'tacotranslate';

async function generateMetadata(locale = 'es') {
	const title = createEntry({string: 'Hello, world!'});
	const description = createEntry({string: 'TacoTranslate on the server'});

	const translations = await translateEntries(
		tacoTranslate,
		{origin: 'opengraph', locale},
		[title, description]
	);

	return {
		title: translations(title),
		description: translations(description)
	};
}

Πώς μεταφράζονται οι συμβολοσειρές

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

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

Αν έχετε μεταφράσει χειροκίνητα μια συμβολοσειρά, αυτές οι μεταφράσεις έχουν προτεραιότητα και επιστρέφονται.

Χρήση προελεύσεων

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

Θα μπορούσατε να ρυθμίσετε origins σε επίπεδο component για πιο λεπτομερή έλεγχο.

Για να το πετύχετε αυτό, σκεφτείτε να χρησιμοποιήσετε πολλούς παρόχους TacoTranslate στο έργο σας.

Λάβετε υπόψη ότι η ίδια συμβολοσειρά μπορεί να λάβει διαφορετικές μεταφράσεις σε διαφορετικές προελεύσεις.

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

Διαχείριση μεταβλητών

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

Οι μεταβλητές σε συμβολοσειρές δηλώνονται με διπλές αγκύλες, όπως {{variable}}.

import {Translate} from 'tacotranslate/react';

function Greeting() {
	const name = 'Juan';
	return <Translate string="Hello, {{name}}!" variables={{name}} />;
}

import {useTranslation} from 'tacotranslate/react';

function useGreeting() {
	const name = 'Juan';
	return useTranslation('Hello, {{name}}!', {variables: {name}});
}

Διαχείριση περιεχομένου HTML

Κατά προεπιλογή, το Translate στοιχείο υποστηρίζει και αποδίδει περιεχόμενο HTML. Ωστόσο, μπορείτε να απενεργοποιήσετε αυτή τη συμπεριφορά ορίζοντας useDangerouslySetInnerHTML σε false.

Η απενεργοποίηση της απόδοσης HTML συνιστάται έντονα όταν μεταφράζετε μη αξιόπιστο περιεχόμενο, όπως περιεχόμενο που δημιουργείται από χρήστες.

Όλη η έξοδος πάντοτε καθαρίζεται με sanitize-html πριν αποδοθεί.

import {Translate} from 'tacotranslate/react';

function Page() {
	return (
		<Translate
			string={`
				Welcome to <strong>my</strong> website.
				I’m using <a href="{{url}}">TacoTranslate</a> to translate text.
			`}
			variables={{url: 'https://tacotranslate.com'}}
			useDangerouslySetInnerHTML={false}
		/>
	);
}

Το παραπάνω παράδειγμα θα αποδοθεί ως απλό κείμενο.

Απόδοση από την πλευρά του διακομιστή