Wie man eine Website in mehrere Sprachen übersetzen lässt

Websites entwickeln sich Tag für Tag weiter, da die Kommunikation der Welt immer enger wird. Jedes Mal müssen wir unsere Entwicklungen nicht nur auf dem lokalen Markt einsetzen, sondern auch auf globale Märkte expandieren. Eine der ersten Möglichkeiten, dies zu erreichen, besteht darin, dass unsere Website (oder Anwendungen) mehrere Sprachen unterstützt. Heute lernst du So wenden Sie mehrere Sprachen auf Ihre Website oder Anwendung an.

So funktioniert unser Web-Übersetzer

1. Wir werden auf unserer Website eine Schaltfläche haben, die uns die Möglichkeit gibt, unsere Website in die verschiedenen von uns konfigurierten Sprachen zu ändern.

2. Die Übersetzung erfolgt mit Javascript, wobei die übersetzten Texte durch Ajax extrahiert werden, die in Textdateien gespeichert werden, die wir zuvor mit den Tags unserer Website konfiguriert haben.

3. Wir werden einen externen Service haben, der uns mitteilt, aus welchem ​​Land sie uns besuchen und so die ideale Sprache für den Besucher visualisieren. Wir werden dies über die IP des Besuchers handhaben.

Vorteile unseres Übersetzers

1. Es ist nicht erforderlich, die Site zu aktualisieren, um die Übersetzung anzuwenden, da viele Sites dies so handhaben.

2. Wir haben nur eine Version unserer Front, es sind nicht zwei oder mehr HTML erforderlich, um die Texte in verschiedenen Sprachen zu bearbeiten.

3. Wenn wir später weitere Sprachen hinzufügen möchten, können wir dies sehr einfach konfigurieren.

4. Super einfach zu bewerben für Websites, die wir bereits erstellt haben und mehrsprachig platzieren möchten.

NotizUm dieses Tutorial anschaulich zu verstehen, sind Vorkenntnisse in HTML, CSS, Javascript (insbesondere jQuery), Ajax-Kenntnissen und ein bisschen PHP ratsam.

1. Beginn der Entwicklung

 Meine mehrsprachige Website Englisch wird geladen…
Hallo Welt

 .loading-lang {Deckkraft: 0; } .loading-lang.show {Opazität: 1; } 

Vorerst bleibt die Datei main.js leer. Wir können von unserem bevorzugten lokalen Webserver aus testen. Es ist notwendig, einen Webserver zu verwenden, da wir später mit Ajax-Anfragen beginnen werden.

2. Übersetzungsdateien erstellen

Dateiinhalt
es.txttitulo-web => Meine mehrsprachige Seite
Willkommen => Willkommen auf meiner Seite
hallo => hallo welt
de.txttitulo-web => Meine mehrsprachige Seite
Willkommen => Willkommen auf meiner Seite
Hallo => Hallo Welt

Ich werde ein wenig über diese Dateien erklären, wie sie strukturiert sind. Jede Phrase, die wir auf unserer Website verwenden, muss mit einer eindeutigen ID identifiziert werden, mit der jede Phrase dort übersetzt werden kann, wo sie speziell platziert werden muss. Zum Beispiel verwenden wir für den Titel der Site die ID title-web gefolgt von den Zeichen => und dann der entsprechenden Phrase. Jeder Satz muss in einer anderen Zeile stehen.

Zusammenfassend müssen wir die folgenden Regeln befolgen

1. Eindeutige ID.

2. Verwenden Sie nach der ID immer die Zeichen =>

3. Trennen Sie den übersetzten Satz des Gesichts durch eine andere Zeile. (Getrennt durch einen Zeilenumbruch oder \ n).

4. Dass die Dateien im txt-Format sind.

3. Ajax erstellen

 $ (document) .ready (function () {var selector = '#translate'; $ (selector) .on ('click', function (e) {e.preventDefault (); startLang ($ (this));} ); var startLang = Funktion (el) {var el = $ (el); var text = el.attr ('Daten-Text'); var Datei = el.attr ('Daten-Datei'); Datei = Datei. split (','); text = text.split (','); var index = el.attr ('data-index'); if (index> = file.length) {index = 0;} changeName (el , text [index]); changeIndex (el, index); loadLang (file [index]); $ ('html'). attr ('lang', file [index]);}; var changeName = function (el, name) {$ (el) .html (name);}; var changeIndex = function (el, index) {$ (el) .attr ('data-index', ++ index);}; var loadLang = function ( lang) {var processLang = function (data) {var arr = data.split ('\ n'); for (var i in arr) {if (lineValid (arr [i])) {var obj = arr [i] .split ('=>'); AssignText (obj [0], obj [1]);}}}; var AssignText = function (key, value) {$ ('[data-lang = "' + key + ' " ] '). each (function () {var attr = $ (this) .attr (' data-destine '); if (typeof attr! ==' undefined ') {$ (this) .attr (attr, Wert); } else {$ (dies) .html (Wert); }}); }; var lineValid = function (line) {return (line.trim (). length> 0); }; $ ('. loading-lang') addClass ('show'); $ .ajax ({url: 'lang /' + lang + '. txt', error: function () {alert ('No translation loading');}, success: function (data) {$ ('. loading-lang ') .removeClass (' zeigen '); processLang (Daten);}}); }; }); 

Wir müssen auch unseren HTML-Code ändern:

 Meine mehrsprachige Website Englisch wird geladen… 
Hallo Welt

Damit können wir testen, ob unsere Seite bereits übersetzt wird.

Lassen Sie uns ein wenig erklären, was wir in unserer Javascript-Datei gemacht und was wir in unserem HTML-Code aktualisiert haben.

Der Prozess, der in der Javascript-Datei ausgeführt wird, ist mit Hilfe des Tags, das als Übersetzungsschaltfläche funktioniert. Wir platzieren ein Ereignis, damit es eine Ajax-Anfrage stellt, um die Datei der Sprache zu extrahieren, die wir verwenden werden Moment.

Wir haben drei Attribute in unserer Übersetzungsschaltfläche namens Datendatei, Datenindex, Datentext.

Schaltflächenattribute
data-file = "ist, inEs ist verantwortlich für die verschiedenen Sprachen, die wir auf unserer Website haben. Für unser Tutorial ist es und weiter. Wenn Sie sich gut erinnern, heißen unsere Übersetzungsdateien es.txt und en.txt.
Datenindex = "1Es hat die Position der nächsten zu habenden Datei. 0 ist Sein und 1 in, dies bedeutet, dass der nächste zu bringende in ist. Wir können diese Organisation in unserem Datendateiattribut sehen, stellen Sie sich einfach vor, dass die Datendatei einem Vektor ähnelt.
data-text = "Englisch, EspañolEs ist dafür zuständig zu visualisieren, in welcher Sprache unsere Anwendung gerade angezeigt wird.

Die Änderung, die wir an unserem HTML-Code vorgenommen haben, bestand darin, das data-lang-Attribut mit der eindeutigen ID zu den zu übersetzenden Tags hinzuzufügen. Sie sollten bereits wissen, dass diese eindeutige ID in den Dateien en.txt und es.txt konfiguriert ist.

Zum Beispiel

Hallo Welt

Lassen Sie uns unseren Übersetzer auf die Probe stellen und sehen, ob das, was wir entwickelt haben, wirklich alles abdeckt, was wir brauchen und wie komplex es ist, eine neue Sprache hinzuzufügen.

Lassen Sie uns eine neue Sprache hinzufügen. In dieser Phase unserer Entwicklung müssen wir erkennen, dass wir nur zwei Dinge tun müssen:

1. Erstellen Sie unsere neue Sprachdatei.

2. Fügen Sie die neue Sprache in den Datendatei- und Datentextattributen hinzu.

Wir erstellen die französische Sprache für unsere Website. Wir erstellen unsere Sprachdatei namens fr.txt im Verzeichnis lang.

Fr.txt-Inhalttitulo-web => Mon Website mehrsprachig
Willkommen => Bienvenue sur mon Seite
hallo => salut monde

Wir aktualisieren unsere Sprachenschaltfläche, daher lautet das Label in index.html:

 Englisch 

Perfekt! damit wir ohne weitere Komplikationen alle benötigten Sprachen zu unseren Websites hinzufügen können. Machen wir einen zweiten Test. Man fragt sich, ob eine übersetzte Phrase auf einem Etikett wiederverwendet und auf einem anderen platziert werden kann, um nicht dieselbe Übersetzung wiederholen zu müssen, auch wenn sie an verschiedenen Stellen gedruckt wird? Die Antwort ist JA, machen wir das Beispiel.

Lassen Sie uns den Titel des Webs mit der eindeutigen ID title-web verwenden, den wir derzeit in unserem Label verwenden, und wir werden ihn in der Fußzeile unserer Website platzieren. Es ist wie folgt:

 Meine mehrsprachige Seite © 

 $ .ajax ({url: 'country.php', success: function (data) {$ (selector) .attr ('data-index', data); startLang ($ (selector));}});