Webbplatser utvecklas dag efter dag, eftersom kommunikationen i världen blir mycket närmare. Varje gång vi behöver vår utveckling inte bara för att användas på den lokala marknaden utan också för att expandera till globala marknader. Ett av de första sätten att uppnå detta är att vår webbplats (eller applikationer) stöder flera språk. Idag lär du dig hur man applicerar flerspråk på din webbplats eller applikation.
Hur vår webböversättare kommer att fungera
1. Vi kommer att ha en knapp på vår webbplats som ger oss möjlighet att ändra vår webbplats till de olika språk som vi har konfigurerat.
2. Översättningen kommer att göras med javascript som extraherar de översatta texterna genom ajax sparade i textfiler som vi tidigare har konfigurerat med taggarna på vår webbplats.
3. Vi kommer att ha en extern tjänst som berättar från vilket land de besöker oss och därmed visualisera det idealiska språket för besökaren. Vi kommer att hantera detta genom besökarens IP.
Fördelar med vår översättare
1. Det är inte nödvändigt att uppdatera webbplatsen för att tillämpa översättningen, eftersom många webbplatser gör det som hanterar det på det sättet.
2. Vi har bara en version av vår front, det är inte nödvändigt att ha två eller flera html för att hantera texterna på olika språk.
3. Om vi senare vill lägga till andra språk kan vi konfigurera det mycket enkelt.
4. Superenkelt att ansöka om webbplatser som vi redan har gjort och vill placera flerspråkiga.
NoteraFör att förstå denna handledning tydligt är det lämpligt att ha tidigare kunskaper om HTML, CSS, Javascript (särskilt jQuery), kunskap om Ajax och lite PHP.
1. Börjar utveckla
Vi börjar med att skapa en katalog som heter translate, i den här katalogen skapar vi index.html -filerna, en css -katalog och kallas js. Och inuti dessa två kataloger lägger en fil som heter main.css Y main.js respektive.
Min flerspråkiga webbplats English Loading …[color = # a9a9a9] Kod från index.html [/ color]Hej världen
.loading-lang {opacitet: 0; } .loading-lang.show {opacitet: 1; } [color = # 808080] main.css -kod [/ color]
För tillfället lämnas main.js -filen tom. Vi kan testa från vår lokala webbserver. Det är nödvändigt att använda en webbserver eftersom vi senare kommer att börja göra ajax -förfrågningar.
2. Skapa översättningsfiler
Vi kommer att skapa filer på vår webbplats där vi kommer att placera texterna på vår webbplats. Vi börjar med att skapa två filer för vår webbplats som kommer att vara två språk. Engelska och spanska. Vi skapar en katalog som heter lang, inuti den här katalogen placerar vi två textfiler som heter es.txt och en.txt (spanska respektive engelska textfil).
Filinnehåll
es.txttitulo-web => Min flerspråkiga webbplats
Välkommen => Välkommen till min webbplats
hej => hej världen
en.txttitulo-web => Min flerspråkiga webbplats
Welcome => Välkommen till min webbplats
hej => Hej världen
Jag kommer att förklara lite om dessa filer hur de är uppbyggda. Varje fras som vi använder på vår webbplats måste identifieras med ett unikt ID, vilket är sättet att översätta varje fras där den måste placeras specifikt. Till exempel, för webbplatsens titel använder vi ID title-web följt av tecknen => sedan motsvarande fras. Varje mening måste vara på en annan rad.
Sammanfattningsvis måste vi följa följande regler
1. Unikt ID.
2. Använd alltid tecknen => efter ID: t
3. Separat ansikte översatt fras med en annan rad. (Separeras med en ny rad eller \ n).
4. Att filerna är txt -format.
3. Skapar Ajax
NoteraOm du inte har mycket kunskap om jQuery, inbjuder jag dig att besöka deras webbplats.
$ (dokument) .ready (funktion () {var selector = '#translate'; $ (väljare) .on ('klick', funktion (e) {e.preventDefault (); startLang ($ (detta));} ); var startLang = funktion (el) {var el = $ (el); var text = el.attr ('data-text'); 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 , text [index]); changeIndex (el, index); loadLang (fil [index]); $ ('html'). attr ('lang', fil [index]);}; var changeName = funktion (el, namn) {$ (el) .html (namn);}; var changeIndex = funktion (el, index) {$ (el) .attr ('data-index', ++ index);}; var loadLang = funktion ( lang) {var processLang = funktion (data) {var arr = data.split ('\ n'); för (var i i arr) {if (lineValid (arr [i])) {var obj = arr [i] .split ('=>'); assignText (obj [0], obj [1]);}}}; var assignText = function (key, value) {$ ('[data-lang = "' + key + ' "] '). varje (function () {var attr = $ (this) .attr (' data-destine '); if (typeof attr! ==' undefined ') {$ (this) .attr (attr, värde); } annat {$ (detta) .html (värde); }}); }; 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 -kod [/ color]
Vi måste också ändra vår html:
Min flerspråkiga webbplats Engelska Läser in …[color = # a9a9a9] Uppdaterad HTML -kod [/ color]Hej världen
Med detta kan vi testa att vår webbplats redan översätts.
Låt oss förklara lite vad vi gjorde i vår javascript -fil och vad vi uppdaterade i vår html.
Processen som utförs i javascript -filen är med hjälp av taggen som fungerar som en översättningsknapp, vi placerar en händelse så att den ansvarar för att göra en ajax -begäran som extraherar filen på det språk som vi ska använda på ögonblick.
Vi har tre attribut i vår översättningsknapp som heter data fil, data-index, data-text.
Knappattribut
data-file = "är, inDet är ansvarigt för att ha de olika språk som vi har på vår webbplats. För vår handledning är det och på. Om du kommer ihåg väl kallas våra översättningsfiler es.txt och en.txt.
data-index = "1Den har positionen för nästa fil att ha. 0 är att vara och 1 in, det betyder att nästa att ta med är in. Vi kan se denna organisation i vårt datafilattribut, tänk dig att datafilen liknar en vektor.
data-text = "Engelska, EspañolDen ansvarar för att visualisera på vilket språk vår applikation för närvarande visas.
Ändringen vi gjorde i vår HTML-kod var att lägga till datalang-attributet till taggarna som vi ska översätta, med det unika ID: t. Du bör redan veta att detta unika ID är konfigurerat i en.txt- och es.txt -filerna.
Till exempel
Hej världen
Låt oss testa vår översättare och se om det vi har utvecklat verkligen täcker allt vi behöver och hur komplext det är att lägga till ett nytt språk.
Låt oss lägga till ett nytt språk. I detta skede av vår utveckling måste vi inse att vi bara behöver göra två saker:
1. Skapa vår nya språkfil.
2. Lägg till det nya språket i datafilen och datatextattributen.
Vi skapar det franska språket för vår webbplats. Vi skapar vår språkfil som heter fr.txt i katalogen lang.
Fr.txt -innehålltitulo-web => Mån webbplats flerspråkig
Welcome => Bienvenue sur mon -webbplats
hej => hälsningar monde
Vi uppdaterar våra språkknapp, så i index.html är etiketten:
engelskLåt oss testa vår webbplats med det nya språket:
Perfekt! så att vi kan lägga till alla språk vi behöver på våra webbplatser utan ytterligare komplikationer. Låt oss göra ett andra test. Man undrar något, kan en översatt fras återanvändas på en etikett och placeras på en annan för att inte behöva upprepa samma översättning även om den skrivs ut på olika platser? Svaret är JA, låt oss göra exemplet.
Låt oss använda webbtiteln med Unique ID title-web som vi för närvarande använder i vår etikett, och vi kommer att placera den i sidfoten på vår webbplats. Det är följande:
Min flerspråkiga webbplats ©[color = # a9a9a9] Lägg till i kodindex.html [/ color]
Vi uppdaterar våra sidor och vi kan se att vi redan har alla tre språken tillgängliga.
Vi har redan det mesta av vår kod redo, vi behöver bara lägga till något mycket viktigt för att alltid ha den på vår webbplats. Vet från vilket land de besöker oss och vet på vilket språk du ska visa besökaren.
4. Landdetektor
Det finns många tjänster på internet som ger oss denna information. För vår handledning kommer vi att använda ipinfodb som hjälper oss att upptäcka från vilket land de besöker oss. Allt du behöver göra är att registrera dig på denna webbplats och det kommer att förse oss med en API -nyckel, som vi kommer att använda tillsammans med besökarens IP.
Först registrerar vi oss på webbplatsen, efter denna registrering skickar du oss ett meddelande till e -postmeddelandet som angavs vid registrering, i detta meddelande ber du oss att aktivera kontot. När den aktiveras ger den oss API -nyckeln, som förblir i drift 10 minuter efter aktiveringen av vårt konto.
Vi testar vår nyckel med hjälp av följande länk http: //api.ipinfodb… .I_API_KEY & ip = IP, ersätt där MI_API_KEY ges av den du fick och IP -adressen du vill hitta. I mitt fall försökte jag med min egen IP och detta blev resultatet.
Om vi ser på bilden är de två sista uppgif.webpterna CO; Colombia. Vi kan använda CO, för att identifiera landet. Eftersom detta är en unik kod för varje land (ISO 3166-2). När vi är tydliga med vad vi ska göra använder vi en serverspråktjänst, för handledningen använder jag PHP.
[color = # a9a9a9] Country.php -kod [/ color]
I exemplet sätter jag att om koden är CO (Colombia) eller ES (Spanien) returnerar den 0 som är indexet för det spanska språket, om koden är FR (Frankrike) returnerar den 2 som är indexet för det franska språket , och om inte är det ingen av de två som returnerar 1 som anger det engelska språket. I självstudien lämnar jag som standard till det engelska språket alla länder som vi inte har angett på språken. Nu i javascript lägger vi till följande kod.
$ .ajax ({url: 'country.php', success: function (data) {$ (selector) .attr ('data-index', data); startLang ($ (selector));}}); [color = # a9a9a9] Lägg till i koden main.js [/ color]
Vi gör tester för att se vilka resultat vi får:
Om du gör lokala tester (som jag i det här fallet), $ _SERVER ['REMOTE_ADDR'], det kommer att returnera IP: n för vårt lokala nätverk och inte det offentliga. Det är därför det returnerar standardspråket engelska, för att tydligt verifiera detta kan vi ladda upp vår handledning till en hosting och det är det!
Med detta har vi avslutat vår handledning, jag hoppas att du gillade den mycket och kan tillämpa den på dina webbplatser, jag lämnar koden i en zip nedan:
Ladda ner kod
translate.zip 3.2K 1459 Nedladdningar
