Nettsteder utvikler seg dag for dag, ettersom kommunikasjonen av verden blir mye nærmere. Hver gang vi trenger at utviklingen vår ikke bare skal brukes på det lokale markedet, men også for å utvide til globale markeder. En av de første måtene for å oppnå dette er at nettstedet vårt (eller applikasjoner) støtter flere språk. I dag vil du lære hvordan du bruker flerspråk på nettstedet eller applikasjonen din.
Hvordan vår web -oversetter vil fungere
1. Vi vil ha en knapp på nettstedet vårt som gir oss muligheten til å endre nettstedet vårt til de forskjellige språkene vi har konfigurert.
2. Oversettelsen vil bli utført med javascript som trekker ut de oversatte tekstene gjennom ajax lagret i tekstfiler som vi tidligere vil ha konfigurert med taggene på nettstedet vårt.
3. Vi vil ha en ekstern tjeneste som vil fortelle oss fra hvilket land de besøker oss og dermed visualisere det ideelle språket for den besøkende. Vi vil håndtere dette etter den besøkendes IP.
Fordeler med vår oversetter
1. Det er ikke nødvendig å oppdatere nettstedet for å bruke oversettelsen, ettersom mange nettsteder gjør det som håndterer det på den måten.
2. Vi har bare en versjon av fronten vår, det er ikke nødvendig å ha to eller flere html for å håndtere tekstene på forskjellige språk.
3. Hvis vi senere vil legge til andre språk, kan vi konfigurere det veldig enkelt.
4. Superenkelt å søke på nettsteder som vi allerede har laget og ønsker å plassere flerspråklig.
MerkFor å forstå denne opplæringen tydelig, er det tilrådelig å ha forkunnskaper om HTML, CSS, Javascript (spesielt jQuery), kunnskap om Ajax og litt PHP.
1. Starter utvikling
Vi starter med å lage en katalog kalt translate, i denne katalogen vil vi lage index.html -filene, en css -katalog og kalt js. Og inne i disse to katalogene legger du en fil som heter main.css Y main.js henholdsvis.
Mitt flerspråklige nettsted English Loading…[color = # a9a9a9] Kode fra index.html [/ color]Hei Verden
.loading-lang {opacity: 0; } .loading-lang.show {opacity: 1; } [color = # 808080] main.css -kode [/ color]
Foreløpig er main.js -filen tom. Vi kan teste fra vår foretrukne lokale webserver. Det er nødvendig å bruke en webserver siden vi senere vil begynne å lage ajax -forespørsler.
2. Opprette oversettelsesfiler
Vi vil lage filer på nettstedet vårt der vi vil plassere tekstene på nettstedet vårt. Vi starter med å lage to filer for nettstedet vårt som vil være to språk. Engelsk og spansk. Vi lager en katalog som heter lang, inne i denne katalogen plasserer vi to tekstfiler kalt es.txt og en.txt (henholdsvis spansk og engelsk tekstfil).
Filinnhold
es.txttitulo-web => Mitt flerspråklige nettsted
velkommen => velkommen til nettstedet mitt
hei => hei verden
no.txttitulo-web => Nettstedet mitt for flere språk
welcome => Velkommen til nettstedet mitt
hei => Hei verden
Jeg vil forklare litt om disse filene hvordan de er strukturert. Hver setning vi bruker på nettstedet vårt må identifiseres med en unik ID, som vil være måten å oversette hvert uttrykk der det må plasseres spesifikt. For eksempel, for tittelen på nettstedet bruker vi ID title-web etterfulgt av tegnene => deretter den tilsvarende setningen. Hver setning må stå på en annen linje.
Oppsummert må vi følge følgende regler
1. Unik ID.
2. Bruk alltid tegnene => etter ID -en
3. Separat ansikt oversatt setning med en annen linje. (Skilt med en ny linje eller \ n).
4. At filene er txt -format.
3. Oppretter Ajax
MerkHvis du ikke har mye kunnskap om jQuery, inviterer jeg deg til å besøke nettstedet deres.
$ (dokument) .ready (funksjon () {var selector = '#translate'; $ (velger) .on ('klikk', funksjon (e) {e.preventDefault (); startLang ($ (dette));} ); 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 [index]); changeIndex (el, index); loadLang (file [index]); $ ('html'). attr ('lang', file [index]);}; var changeName = function (el, navn) {$ (el) .html (navn);}; 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 (key, value) {$ ('[data-lang = "' + key + ' "] '). hver (function () {var attr = $ (this) .attr (' data-destine '); if (typeof attr! ==' undefined ') {$ (this) .attr (attr, verdi); } annet {$ (dette) .html (verdi); }}); }; var lineValid = function (line) {return (line.trim (). length> 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 må også endre vår html:
Mitt flerspråklige nettsted English Loading…[color = # a9a9a9] Oppdatert HTML -kode [/ color]Hei Verden
Med dette kan vi teste at nettstedet vårt allerede blir oversatt.
La oss forklare litt hva vi gjorde i vår javascript -fil og hva vi oppdaterte i vår html.
Prosessen som utføres i javascript -filen er ved hjelp av koden som fungerer som en oversettelsesknapp, vi plasserer en hendelse slik at den er ansvarlig for å lage en ajax -forespørsel som trekker ut filen til språket som vi skal bruke på øyeblikk.
Vi har tre attributter i oversettelsesknappen vår data fil, data-indeks, data-tekst.
Knappegenskaper
data-file = "er, iDet er ansvarlig for å ha de forskjellige språkene vi har på nettstedet vårt. For vår opplæring er det og på. Hvis du husker godt, kalles oversettelsesfilene es.txt og en.txt.
data-index = "1Den har posisjonen til den neste filen å ha. 0 er å være og 1 inn, dette betyr at neste som skal bringes inn. Vi kan se denne organisasjonen i vårt datafilattributt, bare tenk deg at datafilen ligner en vektor.
data-text = "Engelsk, EspañolDet er ansvarlig for å visualisere på hvilket språk applikasjonen vår vises for øyeblikket.
Endringen vi gjorde i HTML-koden vår var å legge til datalang-attributtet til taggene vi skal oversette, med den unike IDen. Du bør allerede vite at denne unike ID -en er konfigurert i en.txt- og es.txt -filene.
For eksempel
Hei Verden
La oss sette vår oversetter på prøve og se om det vi har utviklet virkelig dekker alt vi trenger og hvor komplekst det er å legge til et nytt språk.
La oss legge til et nytt språk. På dette stadiet av utviklingen må vi innse at vi bare trenger å gjøre to ting:
1. Lag vår nye språkfil.
2. Legg til det nye språket i datafil- og datatekstattributtene.
Vi lager det franske språket for nettstedet vårt. Vi lager språkfilen vår kalt fr.txt inne i lang -katalogen.
Fr.txt -innholdtitulo-web => Man nettsted flerspråklig
welcome => Bienvenue sur mon -nettsted
hei => hilsen monde
Vi oppdaterer språk -knappen vår, så i index.html er etiketten:
EngelskLa oss teste nettstedet vårt med det nye språket:
Perfekt! slik at vi kan legge til alle språkene vi trenger på nettstedene våre uten ytterligere komplikasjoner. La oss gjøre en ny test. Man lurer på noe. Kan en oversatt setning gjenbrukes på en etikett og plasseres på en annen for å slippe å gjenta den samme oversettelsen selv om den skrives ut på forskjellige steder? Svaret er JA, la oss gjøre eksemplet.
La oss bruke tittelen på nettet med Unique ID title-web som vi bruker i etiketten vår, og vi kommer til å plassere den i bunnteksten av nettstedet vårt. Det er som følger:
Mitt flerspråklige nettsted ©[color = # a9a9a9] Legg til i kodeindeks.html [/ color]
Vi oppdaterer sidene våre, og vi kan se at vi allerede har alle tre språkene tilgjengelige.
Vi har allerede det meste av koden vår klar, vi trenger bare å legge til noe veldig viktig for å alltid ha den på nettstedet vårt. Vet fra hvilket land de besøker oss, og vet dermed hvilket språk de skal vise den besøkende.
4. Landdetektor
Det er mange tjenester på internett som gir oss denne informasjonen. For opplæringen vår vil vi bruke ipinfodb som vil hjelpe oss med å oppdage fra hvilket land de besøker oss. Alt du trenger å gjøre er å registrere deg på dette nettstedet, og det vil gi oss en API NØKKEL, som vi vil bruke ledsaget av den besøkendes IP.
Først registrerer vi oss på nettstedet, etter denne registreringen sender du oss en melding til e -posten som ble angitt ved registrering, i denne meldingen ber du oss om å aktivere kontoen. Når du aktiverer den, gir den oss API -nøkkelen, som forblir i drift 10 minutter etter aktiveringen av kontoen vår.
Vi tester nøkkelen vår ved hjelp av følgende lenke http: //api.ipinfodb… .I_API_KEY & ip = IP, erstatt hvor MI_API_KEY er gitt av den du fikk og IP -adressen du vil finne. I mitt tilfelle prøvde jeg med min egen IP, og dette var resultatet.
Hvis vi ser på bildet, er de to siste dataene CO; Colombia. Vi kan bruke CO, for å identifisere landet. Siden dette er en unik kode for hvert land (ISO 3166-2). Når vi er klare på hva vi skal gjøre, bruker vi en tjenerspråktjeneste, for opplæringen vil jeg bruke PHP.
[color = # a9a9a9] Country.php -kode [/ color]
I eksemplet setter jeg at hvis koden er CO (Colombia) eller ES (Spania) returnerer den 0 som er indeksen til det spanske språket, hvis koden er FR (Frankrike) returnerer den 2 som er indeksen for det franske språket , og hvis ikke er det ingen av de to som returnerer 1 som angir det engelske språket. I opplæringen overlater jeg som standard til det engelske språket ethvert land som vi ikke har angitt på språkene. Nå i javascript legger vi til følgende kode.
$ .ajax ({url: 'country.php', suksess: funksjon (data) {$ (selector) .attr ('data-index', data); startLang ($ (selector));}}); [color = # a9a9a9] Legg til i koden main.js [/ color]
Vi gjør tester for å se hvilke resultater vi får:
Hvis du gjør lokale tester (som meg i dette tilfellet), $ _SERVER ['REMOTE_ADDR'], vil den returnere IP -en til vårt lokale nettverk og ikke det offentlige. Det er derfor det returnerer standardspråket engelsk, for å tydelig bekrefte dette kan vi laste opp opplæringen vår til en hosting, og det er det!
Med dette har vi fullført opplæringen min, jeg håper du likte den godt og kan bruke den på nettstedene dine. Jeg lar koden ligge i en zip nedenfor:
Last ned kode
translate.zip 3.2K 1459 Nedlastinger
