Websites evolueren dag na dag, omdat de communicatie van de wereld veel dichterbij komt. Elke keer hebben we onze ontwikkelingen niet alleen nodig om te worden gebruikt in de lokale markt, maar ook om uit te breiden naar wereldwijde markten. Een van de eerste manieren om dit te bereiken is door onze site (of applicaties) meerdere talen te laten ondersteunen. Vandaag leer je hoe u meerdere talen kunt toepassen op uw website of applicatie.
Hoe onze webvertaler werkt
1. We zullen een knop op onze site hebben waarmee we onze site kunnen wijzigen in de verschillende talen die we hebben geconfigureerd.
2. De vertaling wordt gedaan met javascript waarbij de vertaalde teksten worden geëxtraheerd via ajax, opgeslagen in tekstbestanden die we eerder hebben geconfigureerd met de tags van onze website.
3. We zullen een externe dienst hebben die ons vertelt vanuit welk land ze ons bezoeken en zo de ideale taal voor de bezoeker visualiseert. We zullen dit afhandelen op het IP-adres van de bezoeker.
Voordelen van onze vertaler
1. Het is niet nodig om de site te vernieuwen om de vertaling toe te passen, omdat veel sites dat op die manier doen.
2. We hebben maar één versie van ons front, het is niet nodig om twee of meer html te hebben om de teksten in verschillende talen te kunnen verwerken.
3. Als we later andere talen willen toevoegen, kunnen we dit heel eenvoudig configureren.
4. Super makkelijk aan te vragen voor sites die we al gemaakt hebben en meertalig willen plaatsen.
OpmerkingOm deze tutorial goed te begrijpen is het raadzaam om voorkennis te hebben van HTML, CSS, Javascript (vooral jQuery), kennis van Ajax en een beetje PHP.
1. Ontwikkeling starten
We beginnen met het maken van een map met de naam translate, binnen deze map maken we de index.html-bestanden, een css-map en genaamd js. En plaats in deze twee mappen een bestand met de naam hoofd.css Y main.js respectievelijk.
Mijn meertalige site Nederlands Bezig met laden…[kleur = # a9a9a9] Code uit index.html [/ kleur]Hallo Wereld
.loading-lang {dekking: 0; } .loading-lang.show {dekking: 1; } [kleur = # 808080] hoofd.css-code [/ kleur]
Voorlopig blijft het main.js-bestand leeg. We kunnen testen vanaf onze favoriete lokale webserver. Het is noodzakelijk om een webserver te gebruiken, omdat we later ajax-verzoeken gaan doen.
2. Vertaalbestanden maken
We zullen op onze site de bestanden maken waarin we de teksten van onze website zullen plaatsen. We beginnen met het maken van twee bestanden voor onze site die twee talen zullen zijn. Engels en Spaans. We creëren een map met de naam lang, in deze map plaatsen we twee tekstbestanden genaamd es.txt en en.txt (respectievelijk Spaans en Engels tekstbestand).
Bestandsinhoud
es.txttitulo-web => Mijn meertalige site
welkom => welkom op mijn site
hallo => hallo wereld
nl.txttitulo-web => Mijn meertalige site
welkom => Welkom op mijn site
hallo => Hallo wereld
Ik zal een beetje uitleggen over deze bestanden hoe ze zijn gestructureerd. Elke zin die we op onze website gebruiken, moet worden geïdentificeerd met een unieke ID, wat de manier is om elke zin te vertalen waar deze specifiek moet worden geplaatst. Voor de titel van de site gebruiken we bijvoorbeeld de ID title-web gevolgd door de tekens => en vervolgens de bijbehorende zin. Elke zin moet op een andere regel staan.
Samengevat moeten we de volgende regels volgen:
1. Unieke ID.
2. Gebruik na de ID altijd de tekens =>
3. Scheid de met het gezicht vertaalde zin door een andere regel. (Gescheiden door een nieuwe regel of \ n).
4. Dat de bestanden in txt-formaat zijn.
3. Ajax maken
OpmerkingAls je niet veel kennis hebt van jQuery, nodig ik je uit om hun website te bezoeken.
$ (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 = bestand. split (','); tekst = tekst.split (','); var index = el.attr ('data-index'); if (index> = bestand.lengte) {index = 0;} changeName (el , tekst [index]); changeIndex (el, index); loadLang (bestand [index]); $ ('html'). attr ('lang', bestand [index]);}; var changeName = function (el, naam) {$ (el) .html (naam);}; var changeIndex = functie (el, index) {$ (el) .attr ('data-index', ++ index);}; var loadLang = functie ( 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 = functie (sleutel, waarde) {$ ('[data-lang = "' + key + ' " ] '). each (function () {var attr = $ (this) .attr (' data-destine '); if (typeof attr! ==' undefined ') {$ (this) .attr (attr, waarde); } else {$ (dit) .html (waarde); }}); }; var lineValid = functie (regel) {return (line.trim (). lengte> 0); }; $ ('. loading-lang'). addClass ('show'); $ .ajax ({url: 'lang /' + lang + '.txt', error: function () {alert ('Geen vertaling geladen');}, succes: function (data) {$ ('. loading-lang ') .removeClass ('show'); processLang (data);}}); }; }); [kleur = # a9a9a9] main.js-code [/ kleur]
We moeten ook onze html aanpassen:
Mijn meertalige site Nederlands Bezig met laden…[kleur = # a9a9a9] HTML-code bijgewerkt [/ kleur]Hallo Wereld
Hiermee kunnen we testen of onze site al vertaald wordt.
Laten we een beetje uitleggen wat we hebben gedaan in ons javascript-bestand en wat we hebben bijgewerkt in onze html.
Het proces dat in het javascript-bestand wordt uitgevoerd, is door middel van de tag die werkt als een vertaalknop, we plaatsen een evenement zodat het verantwoordelijk is voor het maken van een ajax-verzoek en het uitpakken van het bestand van de taal die we gaan gebruiken op de moment.
We hebben drie attributen in onze vertaalknop genaamd data bestand, data-index, data-tekst.
Knopkenmerken
data-file = "is, inHet is verantwoordelijk voor het hebben van de verschillende talen die we op onze site hebben. Voor onze tutorial is het zo en zo. Als u het zich nog goed herinnert, heten onze vertaalbestanden es.txt en en.txt.
data-index = "1Het heeft de positie van het volgende bestand. 0 is zijn en 1 in, dit betekent dat de volgende die moet worden gebracht binnen is. We kunnen deze organisatie zien in ons data-file attribuut, stel je voor dat data-file vergelijkbaar is met een vector.
data-text = "Engels, EspañolHet is verantwoordelijk voor het visualiseren in welke taal onze applicatie momenteel wordt getoond.
De wijziging die we aan onze HTML-code hebben aangebracht, was om het attribuut data-lang toe te voegen aan de tags die we gaan vertalen, met de unieke ID. U moet al weten dat deze unieke ID is geconfigureerd in de en.txt- en es.txt-bestanden.
Bijvoorbeeld
Hallo Wereld
Laten we onze vertaler op de proef stellen en kijken of wat we hebben ontwikkeld echt alles dekt wat we nodig hebben en hoe complex het is om een nieuwe taal toe te voegen.
Laten we een nieuwe taal toevoegen. In dit stadium van onze ontwikkeling moeten we ons realiseren dat we maar twee dingen hoeven te doen:
1. Maak ons nieuwe taalbestand aan.
2. Voeg de nieuwe taal toe aan de attributen data-file en data-text.
We creëren de Franse taal voor onze site. We creëren ons taalbestand met de naam fr.txt in de lang-directory.
Fr.txt inhoudtitulo-web => Mon site meertalig
welkom => Bienvenue sur mon site
hallo => salut monde
We werken onze talenknop bij, dus in index.html is het label:
EngelsLaten we onze site testen met de nieuwe taal:
Perfect! zodat we alle talen die we nodig hebben aan onze websites kunnen toevoegen zonder verdere complicaties. Laten we een tweede test doen. Men vraagt zich iets af: kan een vertaalde zin opnieuw worden gebruikt op het ene etiket en op een ander worden geplaatst om dezelfde vertaling niet te hoeven herhalen, zelfs als deze op verschillende plaatsen is afgedrukt? Het antwoord is JA, laten we het voorbeeld doen.
Laten we de titel van het web met unieke ID titel-web gebruiken die we momenteel in ons label gebruiken, en we gaan het in de voettekst van onze site plaatsen. Het is als volgt:
Mijn meertalige site ©[kleur = # a9a9a9] Toevoegen aan code index.html [/ kleur]
We vernieuwen onze pagina's en we kunnen zien dat we alle drie de talen al beschikbaar hebben.
We hebben het grootste deel van onze code al klaar, we moeten alleen iets heel belangrijks toevoegen om het altijd op onze website te hebben. Weet uit welk land ze ons bezoeken en weet dus welke taal de bezoeker moet tonen.
4. land detector
Er zijn veel diensten op het internet die ons van deze informatie voorzien, voor onze tutorial zullen we ipinfodb gebruiken die ons zal helpen detecteren vanuit welk land ze ons bezoeken. Het enige wat je hoeft te doen is je te registreren op deze site en het zal ons een API KEY geven, die we zullen gebruiken samen met het IP-adres van de bezoeker.
Eerst registreren we op de site, na deze registratie stuurt u ons een bericht naar het e-mailadres dat is aangegeven op het moment van registratie, in dit bericht vraagt u ons om het account te activeren. Bij het activeren geeft het ons de API KEY, die 10 minuten na de activering van ons account in werking blijft.
We testen onze sleutel met behulp van de volgende link: http: //api.ipinfodb… .I_API_KEY & ip = IP, vervang waar MI_API_KEY wordt gegeven door degene die je hebt gekregen en het IP-adres dat je wilt lokaliseren. In mijn geval probeerde ik het met mijn eigen IP en dit was het resultaat.
Als we in de afbeelding zien, zijn de laatste twee gegevens CO; Colombia. We kunnen CO gebruiken om het land te identificeren. Dit is namelijk een unieke code voor elk land (ISO 3166-2). Zodra we duidelijk zijn over wat we gaan doen, gebruiken we een servertaalservice, voor de tutorial zal ik PHP gebruiken.
[kleur = # a9a9a9] Country.php-code [/ kleur]
In het voorbeeld heb ik gesteld dat als de code CO (Colombia) of ES (Spanje) is, deze 0 retourneert, wat de index van de Spaanse taal is, als de code FR (Frankrijk) is, wordt 2 geretourneerd, wat de index is voor de Franse taal , en zo niet, dan is het geen van beide die 1 retourneert die de Engelse taal aangeeft. In de tutorial laat ik standaard elk land over aan de Engelse taal dat we niet in de talen hebben aangegeven. Nu voegen we in het javascript de volgende code toe.
$ .ajax ({url: 'country.php', success: function (data) {$ (selector) .attr ('data-index', data); startLang ($ (selector));}}); [kleur = # a9a9a9] Toevoegen aan code main.js [/ kleur]
We doen tests om te zien welke resultaten we krijgen:
Als je lokale tests doet (zoals ik in dit geval), $ _SERVER ['REMOTE_ADDR'], het zal het IP-adres van ons lokale netwerk retourneren en niet het openbare. Daarom keert het terug naar de standaardtaal Engels, om dit duidelijk te verifiëren kunnen we onze tutorial uploaden naar een hosting en dat is alles!
Hiermee hebben we onze tutorial afgerond, ik hoop dat je het leuk vond en het op je websites kunt toepassen, ik laat de code hieronder in een zip achter:
Download code
vertalen.zip 3.2K 1459 Downloads
