Kaip versti svetainę į kelias kalbas

Tinklalapiai vystosi kiekvieną dieną, nes pasaulio bendravimas tampa vis glaudesnis. Kiekvieną kartą, kai reikia, kad mūsų kūriniai būtų naudojami ne tik vietinėje rinkoje, bet ir plėstis į pasaulines rinkas. Vienas iš pirmųjų būdų tai pasiekti yra tai, kad mūsų svetainė (ar programos) palaiko kelias kalbas. Šiandien jūs išmoksite kaip savo svetainėje ar programoje pritaikyti kelias kalbas.

Kaip veiks mūsų interneto vertėjas

1. Mūsų svetainėje bus mygtukas, kuris suteiks mums galimybę pakeisti savo svetainę į skirtingas sukonfigūruotas kalbas.

2. Vertimas bus atliktas naudojant „JavaScript“, išgaunant išverstus tekstus per „ajax“, išsaugotą teksto failuose, kuriuos anksčiau sukonfigūravome naudodami mūsų svetainės žymas.

3. Turėsime išorinę paslaugą, kuri mums pasakys, iš kurios šalies jie mus lanko ir taip vizualizuos idealią lankytojo kalbą. Mes tai tvarkysime pagal lankytojo IP.

Mūsų vertėjo privalumai

1. Norint pritaikyti vertimą, nebūtina atnaujinti svetainės, nes daugelis svetainių taip elgiasi.

2. Turime tik vieną savo versijos versiją, nebūtina turėti dviejų ar daugiau html, kad būtų galima tvarkyti tekstus skirtingomis kalbomis.

3. Jei vėliau norime pridėti kitų kalbų, galime ją labai lengvai sukonfigūruoti.

4. Labai lengva kreiptis dėl svetainių, kurias jau sukūrėme ir norime patalpinti daugiakalbes kalbas.

PastabaNorint aiškiai suprasti šią pamoką, patartina turėti ankstesnių HTML, CSS, „Javascript“ (ypač „jQuery“) žinių, „Ajax“ žinių ir šiek tiek PHP.

1. Pradedama plėtra

 Įkeliama mano daugiakalbė svetainė anglų kalba …
Labas pasauli

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

Kol kas failas main.js paliekamas tuščias. Galime išbandyti iš pageidaujamo vietinio žiniatinklio serverio. Būtina naudoti žiniatinklio serverį, nes vėliau pradėsime teikti „ajax“ užklausas.

2. Vertimo failų kūrimas

Failo turinys
es.txttitulo-web => Mano daugiakalbė svetainė
sveiki => sveiki atvykę į mano svetainę
labas => labas pasauli
lt.txttitulo-web => Mano daugiakalbė svetainė
sveiki => Sveiki atvykę į mano svetainę
sveiki => Labas pasauli

Aš šiek tiek paaiškinsiu apie šiuos failus, kaip jie yra struktūrizuoti. Kiekviena mūsų svetainėje naudojama frazė turi būti identifikuota su unikaliu ID, kuris bus būdas išversti kiekvieną frazę ten, kur ji turi būti specialiai patalpinta. Pavyzdžiui, svetainės pavadinimui naudojame ID pavadinimą-žiniatinklį, po kurio eina simboliai =>, tada atitinkamą frazę. Kiekvienas sakinys turi būti kitoje eilutėje.

Apibendrinant reikia laikytis šių taisyklių

1. Unikalus ID.

2. Po ID visada naudokite simbolius =>

3. Atskirkite veidą išverstą frazę kita eilute. (Atskirtas nauja eilute arba \ n).

4. Kad failai būtų txt formato.

3. „Ajax“ kūrimas

 $ (dokumentas) .ready (function () {var selector = '#translate'; $ (selector) .on ('click', function (e) {e.preventDefault (); startLang ($ (this));} ); var startLang = funkcija (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 (file [index]); $ ('html'). attr ('lang', file [index]);}; var changeName = function (el, vardas) {$ (el) .html (vardas);}; var changeIndex = funkcija (el, indeksas) {$ (el) .attr ('data-index', ++ index);}; var loadLang = function ( lang) {var processLang = funkcija (duomenys) {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 (raktas, vertė) {$ ('[data-lang = "' + raktas + ' "] '). kiekvienas (funkcija () {var attr = $ (this) .attr (' data-destine '); if (typeof attr! ==' undefined ') {$ (this) .attr (attr, vertė); } else {$ (this) .html (value); }}); }; var lineValid = funkcija (eilutė) {return (line.trim (). ilgis> 0); }; $ ('. loading-lang'). addClass ('rodyti'); $ .ajax ({url: 'lang /' + lang + '. txt', error: function () {alert ('Vertimas neįkeliamas');}, success: function (data) {$ ('. loading-lang ') .removeClass (' rodyti '); processLang (duomenys);}}); }; }); 

Taip pat turime pakeisti savo html:

 Įkeliama mano daugiakalbė svetainė anglų kalba … 
Labas pasauli

Taip galime patikrinti, ar mūsų svetainė jau verčiama.

Šiek tiek paaiškinkime, ką mes padarėme savo „JavaScript“ faile ir ką atnaujinome savo html.

Procesas, atliktas „JavaScript“ faile, yra naudojant žymą, kuri veikia kaip vertimo mygtukas, mes dedame įvykį, kad jis būtų atsakingas už „ajax“ užklausos, skirtos išgauti tos kalbos, kurią ketiname naudoti, failą, pateikimą momentas.

Vertimo mygtuke yra trys atributai informacijos rinkmena, duomenų indeksas, duomenų tekstas.

Mygtuko atributai
data-file = "yra, inJi yra atsakinga už tai, kad mūsų svetainėje būtų įvairių kalbų. Mūsų pamokai yra ir toliau. Jei gerai prisimenate, mūsų vertimo failai vadinami es.txt ir en.txt.
data-index = "1Ji turi kito failo poziciją. 0 yra buvimas, o 1 - tai reiškia, kad ateina kitas. Šią organizaciją matome savo duomenų failo atribute, tik įsivaizduokite, kad duomenų failas yra panašus į vektorių.
data-text = "Anglų, EspañolJi yra atsakinga už vizualizavimą, kokia kalba šiuo metu rodoma mūsų programa.

Mūsų HTML kodo pakeitimas buvo pridėti duomenų lango atributą prie žymų, kurias ketiname versti, naudodami unikalų ID. Jau turėtumėte žinoti, kad šis unikalus ID yra sukonfigūruotas failuose en.txt ir es.txt.

Pavyzdžiui

Labas pasauli

Išbandykime savo vertėją ir pažiūrėkime, ar tai, ką sukūrėme, tikrai apima viską, ko mums reikia, ir kaip sudėtinga pridėti naują kalbą.

Pridėkime naują kalbą. Šiame vystymosi etape turime suvokti, kad turime padaryti tik du dalykus:

1. Sukurkite naują kalbos failą.

2. Pridėkite naują kalbą prie duomenų failo ir duomenų teksto atributų.

Savo svetainei kuriame prancūzų kalbą. Lan kataloge sukuriame savo kalbos failą, pavadintą fr.txt.

Fr.txt turinystitulo-web => Daugiakalbė svetainė
sveiki => Bienvenue sur mon site
sveiki => salut monde

Atnaujiname savo kalbų mygtuką, todėl index.html etiketėje yra:

 Anglų 

Puikus! kad galėtume be papildomų komplikacijų į savo svetaines įtraukti visas reikalingas kalbas. Padarykime antrą testą. Kažkas stebisi, ar galima išverstą frazę pakartotinai panaudoti vienoje etiketėje ir uždėti ant kitos, kad nereikėtų kartoti to paties vertimo, net jei jis spausdinamas skirtingose ​​vietose? Atsakymas yra TAIP, padarykime pavyzdį.

Naudokime žiniatinklio pavadinimą su unikaliu ID pavadinimu-žiniatinklis, kurį šiuo metu naudojame savo etiketėje, ir įdėsime jį į savo svetainės poraštę. Tai yra taip:

 Mano daugiakalbė svetainė © 

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