Site-urile web evoluează zi de zi, deoarece comunicarea lumii devine mult mai strânsă. De fiecare dată avem nevoie de evoluțiile noastre nu numai pentru a fi utilizate pe piața locală, ci și pentru a ne extinde pe piețele globale. Una dintre primele modalități de a realiza acest lucru este ca site-ul nostru (sau aplicațiile) să accepte mai multe limbi. Astăzi veți învăța cum să aplicați mai multe limbi pe site-ul sau aplicația dvs..
Cum va funcționa traducătorul nostru web
1. Vom avea un buton pe site-ul nostru care ne va oferi posibilitatea de a schimba site-ul nostru în diferite limbi pe care le-am configurat.
2. Traducerea se va face cu javascript extragerea textelor traduse prin ajax salvate în fișiere text pe care le-am configurat anterior cu etichetele site-ului nostru web.
3. Vom avea un serviciu extern care ne va spune din ce țară ne vizitează și astfel vom vizualiza limba ideală pentru vizitator. Ne vom ocupa de acest lucru după IP-ul vizitatorului.
Avantajele traducătorului nostru
1. Nu este necesar să reîmprospătați site-ul pentru a aplica traducerea, deoarece multe site-uri fac acest lucru.
2. Avem o singură versiune a frontului nostru, nu este necesar să avem două sau mai multe html pentru a gestiona textele în limbi diferite.
3. Dacă mai târziu dorim să adăugăm alte limbi, o putem configura foarte ușor.
4. Foarte ușor de aplicat pentru site-uri pe care le-am creat deja și dorim să plasăm mai multe limbi.
NotăPentru a înțelege clar acest tutorial, este recomandabil să aveți cunoștințe anterioare de HTML, CSS, Javascript (în special jQuery), cunoștințe despre Ajax și un pic de PHP.
1. Începerea dezvoltării
Vom începe prin crearea unui director numit translate, în acest director vom crea fișierele index.html, un director css și numit js. Și în interiorul acestor două directoare puneți un fișier numit main.css Da main.js respectiv.
Site-ul meu multilingv Engleză Se încarcă …[color = # a9a9a9] Cod din index.html [/ color]Salut Lume
.loading-lang {opacitate: 0; } .loading-lang.show {opacity: 1; } [color = # 808080] cod main.css [/ color]
Deocamdată fișierul main.js este lăsat gol. Putem testa de pe serverul nostru web local preferat. Este necesar să utilizați un server web, deoarece mai târziu vom începe să facem cereri ajax.
2. Crearea fișierelor de traducere
Vom crea pe site-ul nostru fișierele în care vom plasa textele site-ului nostru web. Vom începe prin a crea două fișiere pentru site-ul nostru care vor fi două limbi. Engleza si spaniola. Creăm un director numit lang, în acest director așezăm două fișiere text numite es.txt și en.txt (fișier text în spaniolă și, respectiv, în engleză).
Conținutul fișierului
es.txttitulo-web => Site-ul meu multilingv
bun venit => bun venit pe site-ul meu
salut => salut lume
en.txttitulo-web => Site-ul meu multilingv
welcome => Bun venit pe site-ul meu
hello => Hello World
Voi explica puțin despre aceste fișiere cum sunt structurate. Fiecare expresie pe care o folosim pe site-ul nostru web trebuie să fie identificată cu un ID unic, care va fi modalitatea de a traduce fiecare frază acolo unde trebuie plasată în mod specific. De exemplu, pentru titlul site-ului folosim ID-ul titlu-web urmat de caracterele => apoi sintagma corespunzătoare. Fiecare propoziție trebuie să fie pe o linie diferită.
Pe scurt, trebuie să respectăm următoarele reguli
1. ID unic.
2. Folosiți întotdeauna după ID caracterele =>
3. Separați expresia tradusă a feței cu o altă linie. (Separat de o linie nouă sau \ n).
4. Că fișierele au format txt.
3. Crearea Ajax
NotăDacă nu aveți prea multe cunoștințe despre jQuery, vă invit să vizitați site-ul lor.
$ (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 , text [index]); changeIndex (el, index); loadLang (fișier [index]); $ ('html'). attr ('lang', fișier [index]);}; var changeName = funcție (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 = funcție (cheie, valoare) {$ ('[data-lang = "' + cheie + ' "] '). each (function () {var attr = $ (this) .attr (' data-destine '); if (typeof attr! ==' undefined ') {$ (this) .attr (attr, valoare); } else {$ (this) .html (value); }}); }; var lineValid = function (line) {return (line.trim (). length> 0); }; $ ('. loading-lang'). addClass ('show'); $ .ajax ({url: 'lang /' + lang + '. txt', eroare: function () {alert ('Fără traducere încărcată');}, succes: funcție (date) {$ ('. loading-lang ') .removeClass (' show '); processLang (data);}}); }; }); [color = # a9a9a9] cod main.js [/ color]
De asemenea, trebuie să ne modificăm html-ul:
Site-ul meu multilingv Engleză Se încarcă …[color = # a9a9a9] Cod HTML actualizat [/ color]Salut Lume
Cu aceasta putem testa că site-ul nostru este deja tradus.
Să explicăm puțin ce am făcut în fișierul nostru javascript și ce am actualizat în html.
Procesul desfășurat în fișierul javascript se realizează prin intermediul etichetei care funcționează ca buton de traducere, plasăm un eveniment astfel încât să fie însărcinat cu efectuarea unei cereri ajax extragând fișierul limbii pe care urmează să o folosim la moment.
În butonul nostru de traducere avem trei atribute numite fișier de date, date-index, text-date.
Atributele butonului
data-file = "este, înEste responsabil pentru a avea diferitele limbi pe care le avem pe site-ul nostru. Pentru tutorialul nostru este continuu. Dacă vă amintiți bine fișierele noastre de traducere se numesc es.txt și en.txt.
date-index = "1Are poziția următorului fișier. 0 este și 1 în, acest lucru înseamnă că următorul a aduce este în. Putem vedea această organizație în atributul nostru fișier de date, imaginați-vă că fișierul de date este similar cu un vector.
data-text = "English, EspañolEste responsabil pentru vizualizarea în ce limbă este prezentată aplicația noastră în prezent.
Modificarea adusă codului nostru HTML a fost să adăugăm atributul data-lang la etichetele pe care urmează să le traducem, cu ID-ul unic. Trebuie să știți deja că acest ID unic este configurat în fișierele en.txt și es.txt.
De exemplu
Salut Lume
Să punem traducătorul la încercare și să vedem dacă ceea ce am dezvoltat acoperă într-adevăr tot ce avem nevoie și cât de complex este să adăugăm un nou limbaj.
Să adăugăm o nouă limbă. În acest stadiu al dezvoltării noastre trebuie să ne dăm seama că trebuie doar să facem două lucruri:
1. Creați noul nostru fișier de limbă.
2. Adăugați noua limbă în atributele fișier de date și text de date.
Creăm limba franceză pentru site-ul nostru. Ne creăm fișierul lingvistic numit fr.txt în directorul lang.
Conținut Fr.txttitulo-web => Mon site multilingual
welcome => Bienvenue sur mon site
salut => salut monde
Ne actualizăm butonul Limbi, așa că în index.html eticheta este:
EnglezăSă testăm site-ul nostru cu noua limbă:
Perfect! astfel încât să putem adăuga toate limbile de care avem nevoie pe site-urile noastre web fără alte complicații. Să facem un al doilea test. Ne întrebăm ceva, o frază tradusă poate fi refolosită pe o etichetă și plasată pe alta, astfel încât să nu fie nevoie să repetați aceeași traducere chiar dacă este tipărită în locuri diferite? Răspunsul este DA, să facem exemplul.
Să folosim titlul webului cu ID unic titlu-web pe care îl folosim în prezent în eticheta noastră și îl vom plasa în subsolul site-ului nostru. Este după cum urmează:
Site-ul meu multilingv ©[color = # a9a9a9] Adăugați la cod index.html [/ color]
Ne reîmprospătăm paginile și putem vedea că avem deja toate cele trei limbi disponibile.
Avem deja majoritatea codului pregătit, trebuie doar să adăugăm ceva foarte important pentru a-l avea întotdeauna pe site-ul nostru. Știți din ce țară ne vizitează și știți astfel ce limbă să arătați vizitatorului.
4. Detector de țară
Există multe servicii pe internet care ne oferă aceste informații, pentru tutorialul nostru vom folosi ipinfodb care ne va ajuta să detectăm din ce țară ne vizitează. Tot ce trebuie să faceți este să vă înregistrați pe acest site și acesta ne va furniza o CHEIE API, pe care o vom folosi însoțită de adresa IP a vizitatorului.
Mai întâi ne înregistrăm pe site, după această înregistrare ne veți trimite un mesaj la e-mailul indicat în momentul înregistrării, în acest mesaj ne cereți să activăm contul. Atunci când îl activați, acesta ne oferă cheia API, care rămâne în funcțiune la 10 minute după activarea contului nostru.
Ne testăm cheia folosind următorul link http: //api.ipinfodb… .I_API_KEY & ip = IP, înlocuiți unde MI_API_KEY este dat de cel pe care vi l-ați dat și de IP-ul pe care doriți să îl localizați. În cazul meu am încercat cu propriul meu IP și acesta a fost rezultatul.
Dacă vedem în imagine ultimele două date sunt CO; Columbia. Putem folosi CO pentru a identifica țara. Deoarece acesta este un cod unic pentru fiecare țară (ISO 3166-2). Odată ce suntem clari despre ceea ce vom face, vom folosi un serviciu de limbaj server, pentru tutorial voi folosi PHP.
[color = # a9a9a9] Cod Country.php [/ color]
În exemplu am pus că, dacă codul este CO (Columbia) sau ES (Spania), acesta returnează 0, care este indicele limbii spaniole, dacă codul este FR (Franța), returnează 2, care este indicele pentru limba franceză , iar dacă nu, niciunul dintre cei doi nu returnează 1 indicând limba engleză. În tutorial las în mod implicit în limba engleză orice țară pe care nu o avem indicată în limbi. Acum, în javascript adăugăm următorul cod.
$ .ajax ({url: 'country.php', success: function (data) {$ (selector) .attr ('data-index', data); startLang ($ (selector));}}); [color = # a9a9a9] Adăugați la codul main.js [/ color]
Facem teste pentru a vedea ce rezultate obținem:
Dacă faceți teste locale (ca mine în acest caz), $ _SERVER ['REMOTE_ADDR'], va returna ip-ul rețelei noastre locale și nu cel public. De aceea, returnează limba implicită engleză, pentru a verifica în mod clar acest lucru, putem încărca tutorialul nostru pe un hosting și gata!
Cu aceasta ne-am terminat tutorialul, sper că ți-a plăcut mult și îl poți aplica pe site-urile tale, las codul într-un zip mai jos:
Descărcați codul
translate.zip 3.2K 1459 Descărcări
