Hjemmesider udvikler sig dag efter dag, da kommunikationen i verden bliver meget tættere. Hver gang har vi brug for, at vores udvikling ikke kun skal bruges på det lokale marked, men også at udvide til globale markeder. En af de første måder at opnå dette på er ved at vores websted (eller applikationer) understøtter flere sprog. I dag vil du lære hvordan du anvender flersprog til dit websted eller din applikation.
Hvordan vores weboversætter vil fungere
1. Vi vil have en knap på vores websted, der giver os mulighed for at ændre vores websted til de forskellige sprog, som vi har konfigureret.
2. Oversættelsen vil blive udført med javascript, der udtrækker de oversatte tekster gennem ajax gemt i tekstfiler, som vi tidligere vil have konfigureret med tags på vores websted.
3. Vi vil have en ekstern service, der fortæller os fra hvilket land de besøger os og dermed visualiserer det ideelle sprog for den besøgende. Vi håndterer dette ved besøgendes IP.
Fordele ved vores oversætter
1. Det er ikke nødvendigt at opdatere webstedet for at anvende oversættelsen, da mange websteder gør det, der håndterer det på den måde.
2. Vi har kun en version af vores front, det er ikke nødvendigt at have to eller flere html til at håndtere teksterne på forskellige sprog.
3. Hvis vi senere vil tilføje andre sprog, kan vi meget let konfigurere det.
4. Super let at ansøge om websteder, som vi allerede har lavet og ønsker at placere flersproget.
BemærkFor at forstå denne vejledning klart, er det tilrådeligt at have forudgående kendskab til HTML, CSS, Javascript (især jQuery), kendskab til Ajax og lidt PHP.
1. Starter udvikling
Vi starter med at oprette et bibliotek kaldet translate, inden for dette bibliotek opretter vi index.html -filer, et css -bibliotek og kaldes js. Og inde i disse to mapper lagde en fil kaldet main.css Y main.js henholdsvis.
Mit flersprogede websted Dansk Indlæser…[color = # a9a9a9] Kode fra index.html [/ color]Hej Verden
.loading-lang {opacitet: 0; } .loading-lang.show {opacitet: 1; } [color = # 808080] main.css kode [/ color]
Foreløbig efterlades main.js -filen tom. Vi kan teste fra vores foretrukne lokale webserver. Det er nødvendigt at bruge en webserver, da vi senere vil begynde at lave ajax -anmodninger.
2. Oprettelse af oversættelsesfiler
Vi opretter filerne på vores websted, hvor vi vil placere teksterne på vores websted. Vi starter med at oprette to filer til vores websted, der vil være to sprog. Engelsk og spansk. Vi opretter et bibliotek kaldet lang, inde i dette bibliotek placerer vi to tekstfiler kaldet es.txt og en.txt (henholdsvis spansk og engelsk tekstfil).
Filindhold
es.txttitulo-web => Mit flersprogede websted
velkommen => velkommen til mit websted
hej => hej verden
en.txttitulo-web => Mit flersprogede websted
velkommen => Velkommen til mit websted
hej => Hej verden
Jeg vil forklare lidt om disse filer, hvordan de er opbygget. Hver sætning, vi bruger på vores websted, skal identificeres med et unikt ID, som vil være måden at oversætte hver sætning, hvor den skal placeres specifikt. For eksempel bruger vi titlen på webstedet id-titlen-web efterfulgt af tegnene => derefter den tilsvarende sætning. Hver sætning skal være på en anden linje.
Sammenfattende skal vi følge følgende regler
1. Unikt ID.
2. Brug altid tegnene => efter id'et
3. Separat ansigt oversat sætning med en anden linje. (Adskilt af en ny linje eller \ n).
4. At filerne er txt -format.
3. Oprettelse af Ajax
BemærkHvis du ikke har megen viden om jQuery, inviterer jeg dig til at besøge deres websted.
$ (dokument) .ready (funktion () {var selector = '#translate'; $ (selector) .on ('klik', funktion (e) {e.preventDefault (); startLang ($ (dette));} ); var startLang = funktion (el) {var el = $ (el); var tekst = el.attr ('data-tekst'); var file = el.attr ('datafil'); fil = fil. split (','); text = text.split (','); var index = el.attr ('data-index'); if (index> = file.length) {index = 0;} changeName (el , tekst [indeks]); changeIndex (el, indeks); loadLang (fil [indeks]); $ ('html'). attr ('lang', fil [indeks]);}; var changeName = funktion (el, navn) {$ (el) .html (navn);}; var changeIndex = funktion (el, indeks) {$ (el) .attr ('data-indeks', ++ indeks);}; var loadLang = funktion ( lang) {var processLang = funktion (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 = funktion (nøgle, værdi) {$ ('[data-lang = "' + tast + ' "] '). hver (funktion () {var attr = $ (this) .attr (' data-destine '); if (typeof attr! ==' undefined ') {$ (this) .attr (attr, værdi); } andet {$ (dette) .html (værdi); }}); }; var lineValid = funktion (linje) {return (line.trim (). længde> 0); }; $ ('. loading-lang'). addClass ('show'); $ .ajax ({url: 'lang /' + lang + '. txt', error: function () {alert ('No translation loaded');}, success: function (data) {$ ('. loading-lang ') .removeClass (' show '); processLang (data);}}); }; }); [color = # a9a9a9] main.js kode [/ color]
Vi skal også ændre vores html:
Mit flersprogede websted Dansk Indlæser…[color = # a9a9a9] Opdateret HTML -kode [/ color]Hej Verden
Med dette kan vi teste, at vores websted allerede er ved at blive oversat.
Lad os forklare lidt, hvad vi gjorde i vores javascript -fil, og hvad vi opdaterede i vores html.
Processen, der udføres i javascript -filen, er ved hjælp af mærket, der fungerer som en oversættelsesknap, vi placerer en begivenhed, så den er ansvarlig for at lave en ajax -anmodning, der udtrækker filen af det sprog, som vi skal bruge på øjeblik.
Vi har tre attributter i vores oversættelsesknap kaldet datafil, data-indeks, datatekst.
Knap attributter
data-file = "er, iDet er ansvarligt for at have de forskellige sprog, vi har på vores websted. Til vores tutorial er det og videre. Hvis du husker godt, hedder vores oversættelsesfiler es.txt og en.txt.
data-index = "1Det har placeringen af den næste fil at have. 0 er at være og 1 ind, det betyder, at den næste, der skal bringes, er ind. Vi kan se denne organisation i vores datafilattribut, forestil dig, at datafilen ligner en vektor.
data-text = "Engelsk, EspañolDet er ansvarligt for at visualisere på hvilket sprog vores applikation i øjeblikket vises.
Den ændring, vi foretog i vores HTML-kode, var at tilføje attributten data-lang til de tags, som vi vil oversætte, med det unikke ID. Du burde allerede vide, at dette unikke id er konfigureret i en.txt- og es.txt -filerne.
For eksempel
Hej Verden
Lad os teste vores oversætter og se, om det, vi har udviklet, virkelig dækker alt, hvad vi har brug for, og hvor komplekst det er at tilføje et nyt sprog.
Lad os tilføje et nyt sprog. På dette stadie af vores udvikling skal vi indse, at vi kun skal gøre to ting:
1. Opret vores nye sprogfil.
2. Tilføj det nye sprog i datafil- og datatekstattributterne.
Vi skaber det franske sprog til vores websted. Vi opretter vores sprogfil kaldet fr.txt inde i lang -biblioteket.
Fr.txt indholdtitulo-web => Man site flersproget
velkommen => Bienvenue sur mon site
hej => hilsen monde
Vi opdaterer vores sprogknap, så i index.html er etiketten:
engelskLad os teste vores websted med det nye sprog:
Perfekt! så vi kan tilføje alle de sprog, vi har brug for, til vores websteder uden yderligere komplikationer. Lad os lave en anden test. Man undrer sig over noget, kan en oversat sætning genbruges på en etiket og placeres på en anden for ikke at skulle gentage den samme oversættelse, selvom den er trykt forskellige steder? Svaret er JA, lad os gøre eksemplet.
Lad os bruge titlen på internettet med Unique ID title-web, som vi i øjeblikket bruger i vores etiket, og vi vil placere det i sidefoden af vores websted. Det er som følger:
Mit flersproget websted ©[color = # a9a9a9] Føj til kodeindeks.html [/ color]
Vi opdaterer vores sider, og vi kan se, at vi allerede har alle tre sprog tilgængelige.
Vi har allerede det meste af vores kode klar, vi skal bare tilføje noget meget vigtigt for altid at have det på vores websted. Ved fra hvilket land de besøger os, og ved derfor, hvilket sprog de skal vise den besøgende.
4. Landdetektor
Der er mange tjenester på internettet, der giver os disse oplysninger. Til vores vejledning bruger vi ipinfodb, som hjælper os med at opdage fra hvilket land de besøger os. Alt du skal gøre er at registrere dig på dette websted, og det vil give os en API NØGLE, som vi vil bruge ledsaget af den besøgendes IP.
Først registrerer vi os på webstedet, efter denne registrering sender du os en besked til den e -mail, der er angivet på tidspunktet for registrering, i denne meddelelse beder du os om at aktivere kontoen. Når den aktiveres, giver den os API -NØGLEN, som forbliver i drift 10 minutter efter aktiveringen af vores konto.
Vi tester vores nøgle ved hjælp af følgende link http: //api.ipinfodb… .I_API_KEY & ip = IP, erstat hvor MI_API_KEY er givet af den, du fik, og den IP, du vil finde. I mit tilfælde forsøgte jeg med min egen IP, og dette var resultatet.
Hvis vi ser på billedet, er de to sidste data CO; Colombia. Vi kan bruge CO til at identificere landet. Da dette er en unik kode for hvert land (ISO 3166-2). Når vi er klar over, hvad vi skal gøre, bruger vi en serversprogetjeneste, til selvstudiet vil jeg bruge PHP.
[color = # a9a9a9] Country.php -kode [/ color]
I eksemplet satte jeg, at hvis koden er CO (Colombia) eller ES (Spanien), returnerer den 0, som er indekset for det spanske sprog, hvis koden er FR (Frankrig), returnerer den 2, som er indekset for det franske sprog , og hvis ikke er det ingen af de to, der returnerer 1, der angiver det engelske sprog. I selvstudiet overlader jeg som standard det engelske sprog ethvert land, som vi ikke har angivet på sprogene. Nu i javascript tilføjer vi følgende kode.
$ .ajax ({url: 'country.php', succes: funktion (data) {$ (selector) .attr ('data-index', data); startLang ($ (selector));}}); [color = # a9a9a9] Føj til kode main.js [/ color]
Vi laver tests for at se, hvilke resultater vi får:
Hvis du laver lokale tests (som mig i dette tilfælde), $ _SERVER ['REMOTE_ADDR'], det returnerer ip'en for vores lokale netværk og ikke det offentlige. Det er derfor, det er ved at returnere standardsproget engelsk, for at tydeligt bekræfte dette kan vi uploade vores selvstudie til en hosting, og det er det!
Med dette har vi afsluttet vores tutorial, jeg håber, at du kunne lide det meget og kan anvende det på dine websteder, jeg efterlader koden i en zip nedenfor:
Download kode
translate.zip 3.2K 1459 Downloads
