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

Χρήση του TacoTranslate

Greek

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

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

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

import {Translate} from 'tacotranslate/react';

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

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

Χρήση του hook useTranslation.
Επιστρέφει τις μεταφράσεις ως απλή συμβολοσειρά. Χρήσιμο, για παράδειγμα, σε 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 περιέχουν αυτό που ονομάζουμε προελεύσεις. Σκεφτείτε τις ως σημεία εισόδου, φακέλους ή ομάδες για τις συμβολοσειρές και τις μεταφράσεις σας.

import {TacoTranslate} from 'tacotranslate/react';

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

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

Για πιο λεπτομερή έλεγχο, μπορείτε να ρυθμίσετε προελεύσεις σε επίπεδο συνιστώσας.

Για να το επιτύχετε αυτό, σκεφτείτε να χρησιμοποιήσετε πολλαπλούς παρόχους 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}
		/>
	);
}

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

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