Kā tulkot vietni vairākās valodās

Vietnes attīstās katru dienu, jo pasaules saziņa kļūst daudz ciešāka. Katru reizi, kad mūsu attīstība ir ne tikai jāizmanto vietējā tirgū, bet arī jāpaplašina līdz pasaules tirgiem. Viens no pirmajiem veidiem, kā to paveikt, ir tas, ka mūsu vietne (vai lietojumprogrammas) atbalsta vairākas valodas. Šodien jūs iemācīsities kā savai vietnei vai lietojumprogrammai piemērot vairākas valodas.

Kā darbosies mūsu tīmekļa tulks

1. Mūsu vietnē būs poga, kas dos mums iespēju mainīt mūsu vietni uz dažādām mūsu konfigurētajām valodām.

2. Tulkojums tiks veikts, izmantojot javascript, iztulkotos tekstus izmantojot ajax, kas saglabāti teksta failos, kurus mēs iepriekš būsim konfigurējuši ar mūsu vietnes tagiem.

3. Mums būs ārējs pakalpojums, kas mums pateiks, no kuras valsts viņi mūs apmeklē, un tādējādi vizualizēs apmeklētājam ideālo valodu. Mēs to apstrādāsim pēc apmeklētāja IP.

Mūsu tulka priekšrocības

1. Lai lietotu tulkojumu, nav nepieciešams atsvaidzināt vietni, jo daudzas vietnes to apstrādā.

2. Mūsu priekšpusē ir tikai viena versija, lai apstrādātu tekstus dažādās valodās, nav nepieciešami divi vai vairāki html.

3. Ja vēlāk vēlamies pievienot citas valodas, mēs to varam ļoti viegli konfigurēt.

4. Ļoti viegli pieteikties vietnēm, kuras jau esam izveidojuši un kuras vēlas izvietot daudzvalodu.

PiezīmeLai skaidri saprastu šo pamācību, ieteicams būt iepriekšējām zināšanām par HTML, CSS, Javascript (īpaši jQuery), zināšanām par Ajax un mazliet PHP.

1. Attīstības uzsākšana

 Mana daudzvalodu vietne angļu valodā tiek ielādēta…
Sveika pasaule

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

Pagaidām main.js fails ir tukšs. Mēs varam pārbaudīt no vēlamā vietējā tīmekļa servera. Ir nepieciešams izmantot tīmekļa serveri, jo vēlāk mēs sāksim veikt ajax pieprasījumus.

2. Tulkošanas failu veidošana

Faila saturs
es.txttitulo-web => Mana daudzvalodu vietne
laipni lūdzam => laipni lūdzam manā vietnē
sveiki => sveika pasaule
en.txttitulo-web => Mana daudzvalodu vietne
welcome => Laipni lūdzam manā vietnē
sveiki => Sveika pasaule

Es nedaudz paskaidrošu par šiem failiem, kā tie ir strukturēti. Katra mūsu tīmekļa vietnē izmantotā frāze ir jāidentificē ar unikālu ID, kas būs veids, kā tulkot katru frāzi tur, kur tā īpaši jānovieto. Piemēram, vietnes nosaukumam mēs izmantojam ID nosaukumu tīmeklī, kam seko rakstzīmes =>, tad atbilstošo frāzi. Katram teikumam jābūt citā rindā.

Kopumā mums ir jāievēro šādi noteikumi

1. Unikāls ID.

2. Pēc ID vienmēr izmantojiet rakstzīmes =>

3. Atdaliet seju, kas tulkota ar citu rindiņu. (Atdalīta ar jaunu rindu vai \ n).

4. Ka faili ir txt formātā.

3. Ajax izveide

 $ (document) .ready (function () {var selector = '#translate'; $ (selector) .on ('click', function (e) {e.preventDefault (); startLang ($ (this));} ); var startLang = funkcija (el) {var el = $ (el); var teksts = el.attr ('datu teksts'); var fails = el.attr ('datu fails'); fails = fails. 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, name) {$ (el) .html (name);}; var changeIndex = function (el, index) {$ (el) .attr ('data-index', ++ index);}; var loadLang = function ( lang) {var processLang = funkcija (dati) {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 (atslēga, vērtība) {$ ('[data-lang = "' + taustiņš + ' "] '). katrs (funkcija () {var attr = $ (this) .attr (' data-destine '); if (typeof attr! ==' undefined ') {$ (this) .attr (attr, vērtība); } cits {$ (šis) .html (vērtība); }}); }; var lineValid = funkcija (rinda) {return (line.trim (). garums> 0); }; $ ('. loading-lang'). addClass ('parādīt'); $ .ajax ({url: 'lang /' + lang + '. txt', error: function () {alert ('Tulkojums nav ielādēts');}, success: function (data) {$ ('. loading-lang ') .removeClass (' parādīt '); processLang (dati);}}); }; }); 

Mums ir arī jāmaina mūsu html:

 Mana daudzvalodu vietne angļu valodā tiek ielādēta… 
Sveika pasaule

Ar to mēs varam pārbaudīt, vai mūsu vietne jau tiek tulkota.

Nedaudz paskaidrosim, ko mēs darījām savā javascript failā un ko atjauninājām savā html.

JavaScript failā tiek veikts process, izmantojot tagu, kas darbojas kā tulkošanas poga, un mēs ievietojam notikumu tā, lai tas būtu atbildīgs par ajax pieprasījuma veikšanu, lai iegūtu tās valodas failu, kuru mēs izmantosim brīdis.

Mūsu tulkošanas pogai ir trīs atribūti datu fails, datu indekss, datu teksts.

Pogas atribūti
data-file = "ir, inTā ir atbildīga par to, lai mūsu vietnē būtu dažādas valodas. Mūsu apmācībai tas ir un tālāk. Ja jūs labi atceraties, mūsu tulkošanas failus sauc par es.txt un en.txt.
data-index = "1Tam ir nākamā faila pozīcija. 0 ir būt un 1 in, tas nozīmē, ka nākamā ir jānes. Mēs varam redzēt šo organizāciju mūsu datu faila atribūtā, iedomājieties, ka datu fails ir līdzīgs vektoram.
data-text = "Angļu, spāņuTā ir atbildīga par vizualizāciju, kādā valodā pašlaik tiek rādīta mūsu lietojumprogramma.

Mūsu HTML kodā tika veiktas izmaiņas, lai pievienotu atribūtu data-lang tagiem, kurus mēs tulkosim, izmantojot unikālo ID. Jums jau vajadzētu zināt, ka šis unikālais ID ir konfigurēts failos en.txt un es.txt.

Piemēram

Sveika pasaule

Pārbaudīsim savu tulku un pārbaudīsim, vai mūsu izstrādātais patiešām aptver visu nepieciešamo un cik sarežģīti ir jaunas valodas pievienošana.

Pievienosim jaunu valodu. Šajā attīstības posmā mums ir jāsaprot, ka mums ir jādara tikai divas lietas:

1. Izveidojiet mūsu jauno valodas failu.

2. Pievienojiet jauno valodu datu faila un datu teksta atribūtiem.

Mēs izveidojam franču valodu mūsu vietnei. Mēs izveidojam valodas failu ar nosaukumu fr.txt lang direktorijā.

Fr.txt saturstitulo-web => Pirmā vietne daudzvalodu
welcome => Bienvenue sur mon site
sveiki => salut monde

Mēs atjauninām savu valodu pogu, tāpēc index.html etiķete ir šāda:

 Angļu 

Perfekti! lai mēs bez papildu sarežģījumiem varētu savām vietnēm pievienot visas nepieciešamās valodas. Veiksim otro pārbaudi. Kāds brīnās, vai tulkoto frāzi var atkārtoti izmantot uz vienas etiķetes un novietot uz citas, lai nebūtu jāatkārto viens un tas pats tulkojums pat tad, ja tas ir iespiests dažādās vietās? Atbilde ir JĀ, pieņemsim piemēru.

Izmantosim tīmekļa nosaukumu ar unikālu ID nosaukumu-tīmeklis, ko mēs pašlaik izmantojam mūsu etiķetē, un mēs to ievietosim mūsu vietnes kājenē. Tas ir šāds:

 Mana daudzvalodu vietne © 

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