Kako web stranicu prevesti na nekoliko jezika

Web stranice se razvijaju iz dana u dan, jer se svjetska komunikacija sve više približava. Svaki put nam je potreban naš razvoj ne samo za korištenje na lokalnom tržištu već i za širenje na globalna tržišta. Jedan od prvih načina da se to postigne je da naša web stranica (ili aplikacije) podržava više jezika. Danas ćete naučiti kako primijeniti više jezika na svoju web stranicu ili aplikaciju.

Kako će raditi naš web prevoditelj

1. Na našoj web stranici imat ćemo gumb koji će nam dati mogućnost promjene naše web stranice na različite jezike koje smo konfigurirali.

2. Prijevod će se izvršiti pomoću javascripta izdvajanjem prevedenih tekstova putem ajaxa spremljenih u tekstualne datoteke koje smo prethodno konfigurirali s oznakama naše web stranice.

3. Imat ćemo vanjsku uslugu koja će nam reći iz koje zemlje nas posjećuje i tako vizualizirati idealan jezik za posjetitelja. To ćemo riješiti putem IP -a posjetitelja.

Prednosti našeg prevoditelja

1. Nije potrebno osvježavati web mjesto da biste primijenili prijevod, jer mnoge web stranice to rade na taj način.

2. Imamo samo jednu verziju našeg fronta, nije potrebno imati dva ili više html -a za rukovanje tekstovima na različitim jezicima.

3. Ako kasnije želimo dodati druge jezike, možemo ga vrlo jednostavno konfigurirati.

4. Izuzetno se lako prijaviti za web stranice koje smo već napravili i želimo ih postaviti na više jezika.

BilješkaDa biste jasno razumjeli ovaj vodič, preporučljivo je imati prethodno znanje o HTML -u, CSS -u, Javascriptu (posebno jQuery), znanje o Ajaxu i malo PHP -a.

1. Pokretanje razvoja

 Moje višejezično web mjesto na engleskom jeziku Učitavanje …
Pozdrav svijete

 .loading-lang {neprozirnost: 0; } .loading-lang.show {neprozirnost: 1; } 

Za sada je datoteka main.js ostavljena prazna. Možemo testirati s našeg omiljenog lokalnog web poslužitelja. Potrebno je koristiti web poslužitelj jer ćemo kasnije početi postavljati ajax zahtjeve.

2. Izrada prijevodnih datoteka

Sadržaj datoteke
es.txttitulo-web => Moje višejezično mjesto
dobrodošli => dobrodošli na moju stranicu
zdravo => pozdrav svijet
en.txttitulo-web => Moje višejezično mjesto
dobrodošli => Dobro došli na moju stranicu
pozdrav => Pozdrav Svijet

Objasnit ću malo o tim datotekama kako su one strukturirane. Svaka fraza koju koristimo na našoj web stranici mora biti identificirana jedinstvenim ID -om, što će biti način prevođenja svake fraze na mjesto gdje je potrebno posebno postaviti. Na primjer, za naslov web stranice koristimo ID title-web nakon čega slijede znakovi => zatim odgovarajuća fraza. Svaka rečenica mora biti u drugom retku.

Ukratko, moramo se pridržavati sljedećih pravila

1. Jedinstveni ID.

2. Uvijek koristite ID znakove =>

3. Odvojeno lice prevedeno izrazom drugim retkom. (Odvojeno novim retkom ili \ n).

4. Da su datoteke u txt formatu.

3. Stvaranje Ajaxa

 $ (document) .ready (function () {var selector = '#translate'; $ (selector) .on ('click', function (e) {e.preventDefault (); startLang ($ (this));} ); 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 , tekst [indeks]); changeIndex (el, indeks); loadLang (datoteka [indeks]); $ ('html'). attr ('lang', datoteka [indeks]);}; var changeName = funkcija (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 = funkcija (ključ, vrijednost) {$ ('[data-lang = "' + key + ' "] '). svaki (function () {var attr = $ (this) .attr (' data-destine '); if (typeof attr! ==' undefined ') {$ (this) .attr (attr, vrijednost); } else {$ (ovo) .html (vrijednost); }}); }; var lineValid = function (line) {return (line.trim (). length> 0); }; $ ('. loading-lang'). addClass ('show'); $ .ajax ({url: 'lang /' + lang + '. txt', greška: function () {alert ('Nije učitan prijevod');}, uspjeh: function (data) {$ ('. loading-lang ') .removeClass (' show '); processLang (podaci);}}); }; }); 

Također moramo promijeniti naš html:

 Moje višejezično web mjesto na engleskom jeziku Učitavanje … 
Pozdrav svijete

Time možemo provjeriti je li naša stranica već prevedena.

Objasnimo malo što smo učinili u našoj javascript datoteci i što smo ažurirali u našem html -u.

Proces koji se provodi u javascript datoteci je pomoću oznake koja radi kao gumb za prijevod, postavljamo događaj tako da je on zadužen za slanje ajax zahtjeva za izdvajanje datoteke jezika koji ćemo koristiti na trenutak.

U našem gumbu za prevođenje imamo tri atributa koji se nazivaju podatkovna datoteka, indeks podataka, podatak-tekst.

Atributi gumba
data-file = "nalazi se uOn je odgovoran za različite jezike koje imamo na našoj web stranici. Za naš vodič je i dalje. Ako se dobro sjećate, naše datoteke prijevoda nazivaju se es.txt i en.txt.
data-index = "1Ima poziciju sljedeće datoteke koju treba imati. 0 je bivanje i 1 ulaz, to znači da je sljedeći donijeti. Ovu organizaciju možemo vidjeti u atributu datoteke podataka, samo zamislite da je datoteka podataka slična vektoru.
data-text = "Engleski, EspañolOdgovoran je za vizualizaciju na kojem se jeziku trenutno prikazuje naša aplikacija.

Izmjena koju smo napravili u našem HTML kodu bila je dodavanje atributa data-lang oznakama koje ćemo prevesti s jedinstvenim ID-om. Trebali biste već znati da je ovaj jedinstveni ID konfiguriran u datotekama en.txt i es.txt.

Na primjer

Pozdrav svijete

Stavimo našeg prevoditelja na test i provjerimo pokriva li ono što smo razvili doista sve što nam je potrebno i koliko je složeno dodati novi jezik.

Dodajmo novi jezik. U ovoj fazi našeg razvoja moramo shvatiti da moramo učiniti samo dvije stvari:

1. Napravite našu novu jezičnu datoteku.

2. Dodajte novi jezik u datoteku podataka i atribute teksta podataka.

Mi stvaramo francuski jezik za našu web stranicu. Našu jezičku datoteku pod nazivom fr.txt stvaramo unutar direktorija lang.

Fr.txt sadržajtitulo-web => Mon site višejezično
dobrodošli => Bienvenue sur mon site
zdravo => salut monde

Ažuriramo gumb za jezike pa je oznaka u index.html sljedeća:

 Engleski 

Savršen! tako da na svoje web stranice možemo dodati sve jezike koji su nam potrebni bez daljnjih komplikacija. Napravimo drugi test. Neko se pita, može li se prevedeni izraz ponovno upotrijebiti na jednoj naljepnici i staviti na drugu kako ne bi morao ponavljati isti prijevod čak i ako je tiskan na različitim mjestima? Odgovor je DA, učinimo to na primjeru.

Upotrijebimo naslov weba s Unique ID naslovom-web koji trenutno koristimo u našoj oznaci, a mi ćemo ga postaviti u podnožje naše stranice. To je kako slijedi:

 Moje višejezično web mjesto © 

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