Jak przetłumaczyć stronę internetową na kilka języków?

Strony internetowe ewoluują z dnia na dzień, ponieważ komunikacja ze światem staje się coraz bliższa. Za każdym razem potrzebujemy naszych rozwiązań nie tylko do wykorzystania na rynku lokalnym, ale także do ekspansji na rynki globalne. Jednym z pierwszych sposobów na osiągnięcie tego jest obsługa przez naszą witrynę (lub aplikacje) wielu języków. Dzisiaj się nauczysz jak zastosować wielojęzyczność do swojej witryny lub aplikacji.

Jak będzie działał nasz tłumacz internetowy

1. Na naszej stronie będziemy mieli przycisk, który da nam możliwość zmiany naszej strony na różne skonfigurowane przez nas języki.

2. Tłumaczenie zostanie wykonane za pomocą javascriptu wyodrębniającego przetłumaczone teksty za pomocą ajaxu zapisanego w plikach tekstowych, które wcześniej skonfigurowaliśmy za pomocą tagów naszej strony internetowej.

3. Będziemy mieli usługę zewnętrzną, która poinformuje nas, z jakiego kraju nas odwiedzają, a tym samym zobrazuje idealny język dla gościa. Zajmiemy się tym za pomocą adresu IP odwiedzającego.

Zalety naszego tłumacza

1. Nie jest konieczne odświeżanie witryny, aby zastosować tłumaczenie, ponieważ wiele witryn robi to w ten sposób.

2. Mamy tylko jedną wersję naszego frontu, nie jest konieczne posiadanie dwóch lub więcej html do obsługi tekstów w różnych językach.

3. Jeśli później będziemy chcieli dodać inne języki, możemy to bardzo łatwo skonfigurować.

4. Super łatwe aplikowanie na strony, które już stworzyliśmy i które chcemy umieścić w wielu językach.

NotatkaAby dobrze zrozumieć ten samouczek, dobrze jest mieć wcześniejszą znajomość HTML, CSS, Javascript (zwłaszcza jQuery), znajomość Ajax i trochę PHP.

1. Rozpoczęcie rozwoju

 Moja wielojęzyczna strona Polski Wczytywanie…
Witaj świecie

 .loading-lang {przezroczystość: 0; } .loading-lang.show {przezroczystość: 1; } 

Na razie plik main.js jest pusty. Możemy testować z naszego preferowanego lokalnego serwera WWW. Niezbędne jest użycie serwera WWW, ponieważ później zaczniemy wykonywać żądania ajaxowe.

2. Tworzenie plików tłumaczeniowych

Zawartość pliku
es.txttitulo-web => Moja wielojęzyczna strona
witam => witam na mojej stronie
cześć => cześć świecie
pl.txttitulo-web => Moja wielojęzyczna strona
witam => witam na mojej stronie
cześć => Witaj świecie

Wyjaśnię trochę o tych plikach, jak mają strukturę. Każda fraza, której używamy na naszej stronie musi być identyfikowana unikalnym identyfikatorem, który będzie sposobem na przetłumaczenie każdej frazy tam, gdzie ma być konkretnie umieszczona. Na przykład dla tytułu witryny używamy identyfikatora title-web, po którym następuje znak =>, a następnie odpowiednia fraza. Każde zdanie musi znajdować się w innej linii.

Podsumowując, musimy przestrzegać następujących zasad

1. Unikalny identyfikator.

2. Zawsze używaj po identyfikatorze znaków =>

3. Oddziel twarz przetłumaczoną frazą inną linią. (Oddzielone znakiem nowej linii lub \ n).

4. Że pliki są w formacie txt.

3. Tworzenie Ajaksu

 $ (dokument) .ready (funkcja () {var selector = '#translate'; $ (selektor) .on ('klik', funkcja (e) {e.preventDefault (); startLang ($ (to));} ); var startLang = function (el) {var el = $ (el); var text = el.attr ('data-text'); var file = el.attr ('data-file'); file = file. split (','); text = text.split (','); var index = el.attr ('data-index'); if (index> = file.length) {index = 0;} changeName (el , text [indeks]); 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 (klucz, wartość) {$ ('[data-lang = "' + klucz + ' "]'). each (function() {var attr = $ (this) .attr (' data-destine '); if (typeof attr! ==' undefined ') {$ (this) .attr (atrybut, wartość); } else {$ (to) .html (wartość); }}); }; var lineValid = function (line) {return (line.trim (). length> 0); }; $ ('.loading-lang'). addClass ('show'); $ .ajax ({url: 'język /' + język + '.txt', error: function() {alert ('Brak załadowanego tłumaczenia');}, sukces: function (data) {$ ('.loading-język ') .removeClass ('pokaż');processLang (dane);}}); }; }); 

Musimy również zmodyfikować nasz html:

 Moja wielojęzyczna strona Polski Wczytywanie… 
Witaj świecie

Dzięki temu możemy sprawdzić, czy nasza strona jest już tłumaczona.

Wyjaśnijmy trochę, co zrobiliśmy w naszym pliku javascript i co zaktualizowaliśmy w naszym html.

Proces realizowany w pliku javascript polega na tym, że za pomocą tagu, który działa jako przycisk tłumaczenia, umieszczamy zdarzenie, aby było odpowiedzialne za wykonanie żądania ajax, wyodrębnienie pliku języka, którego będziemy używać na za chwilę.

W naszym przycisku tłumaczenia mamy trzy atrybuty o nazwie plik danych, indeks danych, tekst-danych.

Atrybuty przycisków
plik-danych = "jest, inJest odpowiedzialny za posiadanie różnych języków, które mamy na naszej stronie. W naszym samouczku jest i tak dalej. Jeśli dobrze pamiętasz, nasze pliki tłumaczeń nazywają się es.txt i en.txt.
indeks danych = "1Ma pozycję następnego pliku. 0 to bycie i 1 w, co oznacza, że ​​następny do przyniesienia jest w środku. Możemy zobaczyć tę organizację w naszym atrybucie pliku danych, wyobraźmy sobie, że plik danych jest podobny do wektora.
data-text = "angielski, hiszpański"Odpowiada za wizualizację, w jakim języku aktualnie wyświetlana jest nasza aplikacja.

Modyfikacja, którą wprowadziliśmy w naszym kodzie HTML, polegała na dodaniu atrybutu data-lang do tagów, które zamierzamy tłumaczyć, z unikalnym identyfikatorem. Powinieneś już wiedzieć, że ten unikalny identyfikator jest skonfigurowany w plikach en.txt i es.txt.

Na przykład

Witaj świecie

Przetestujmy naszego tłumacza i zobaczmy, czy to, co opracowaliśmy, naprawdę obejmuje wszystko, czego potrzebujemy i jak skomplikowane jest dodanie nowego języka.

Dodajmy nowy język. Na tym etapie naszego rozwoju musimy zdać sobie sprawę, że musimy zrobić tylko dwie rzeczy:

1. Utwórz nasz nowy plik językowy.

2. Dodaj nowy język w atrybutach data-file i data-text.

Tworzymy język francuski dla naszej strony. Tworzymy nasz plik językowy o nazwie fr.txt w katalogu lang.

Zawartość Fr.txttitulo-web => strona pon wielojęzyczna
witamy => Bienvenue sur mon site
cześć => salut monde

Aktualizujemy nasz przycisk językowy, więc w index.html etykieta to:

 język angielski 

Idealny! dzięki czemu możemy dodawać wszystkie potrzebne nam języki do naszych stron bez dalszych komplikacji. Zróbmy drugi test. Można się nad czymś zastanawiać, czy przetłumaczoną frazę można ponownie wykorzystać na jednej etykiecie i umieścić na innej, aby nie musieć powtarzać tego samego tłumaczenia, nawet jeśli jest wydrukowane w różnych miejscach? Odpowiedź brzmi TAK, zróbmy przykład.

Użyjmy tytułu strony internetowej z unikalnym identyfikatorem title-web, którego obecnie używamy w naszej etykiecie, i umieścimy go w stopce naszej witryny. Wygląda to następująco:

 Moja wielojęzyczna strona © 

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