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

Χρήση του TacoTranslate

Greek

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

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

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

import {Translate} from 'tacotranslate/react';

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

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

Χρήση του 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)
	};
}

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

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

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

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

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

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

import {TacoTranslate} from 'tacotranslate/react';

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

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

Για πιο λεπτομερή έλεγχο, μπορείτε να δημιουργήσετε origins σε επίπεδο component.

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

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

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

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

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

Οι μεταβλητές σε συμβολοσειρές δηλώνονται χρησιμοποιώντας διπλές αγκύλες, όπως {{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}
		/>
	);
}

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

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