Како превести веб страницу на неколико језика

Веб локације се развијају из дана у дан, јер се светска комуникација све више приближава. Сваки пут нам је потребно да се наш развој не користи само на локалном тржишту већ и за ширење на глобална тржишта. Један од првих начина да се то постигне је да наша веб локација (или апликације) подржава више језика. Данас ћете научити како применити више језика на своју веб локацију или апликацију.

Како ће радити наш веб преводилац

1. На нашој веб локацији имаћемо дугме које ће нам дати могућност да променимо нашу веб страницу на различите језике које смо конфигурисали.

2. Превођење ће се извршити помоћу јавасцрипта, издвајајући преведене текстове кроз ајак сачуване у текстуалним датотекама које смо претходно конфигурисали са ознакама наше веб странице.

3. Имаћемо спољну услугу која ће нам рећи из које земље нас посећује и на тај начин визуализовати идеалан језик за посетиоца. То ћемо решити путем ИП адресе посетиоца.

Предности нашег преводиоца

1. Није потребно освежавати веб локацију да бисте применили превод, јер многи сајтови то раде на тај начин.

2. Имамо само једну верзију нашег предњег дела, није потребно имати два или више хтмл -а за руковање текстовима на различитим језицима.

3. Ако касније желимо да додамо друге језике, можемо га врло лако конфигурирати.

4. Супер лако се пријавити за веб локације које смо већ направили и желимо да их поставимо на више језика.

БелешкаДа бисте јасно разумели овај водич, препоручљиво је имати претходно знање о ХТМЛ -у, ЦСС -у, Јавасцрипт -у (посебно јКуери), знање о Ајак -у и мало ПХП -а.

1. Покретање развоја

 Моја вишејезична веб локација енглески Учитавање…
Здраво Свете

 .лоадинг-ланг {непрозирност: 0; } .лоадинг-ланг.схов {непрозирност: 1; } 

За сада је датотека маин.јс остављена празна. Можемо тестирати са нашег омиљеног локалног веб сервера. Потребно је користити веб сервер јер ћемо касније почети са постављањем ајак захтева.

2. Креирање датотека превода

Садржај датотеке
ес.ткттитуло-веб => Моја вишејезична веб локација
велцоме => добродошли на моју страницу
здраво => здраво свет
ен.ткттитуло-веб => Моја вишејезична веб локација
велцоме => Добродошли на моју страницу
хелло => Хелло Ворлд

Објаснићу мало о овим датотекама како су структуриране. Свака фраза коју користимо на нашој веб страници мора бити идентификована јединственим ИД -ом, што ће бити начин превођења сваке фразе тамо где је потребно посебно поставити. На пример, за наслов сајта користимо ИД титле-веб праћен знаковима => затим одговарајућу фразу. Свака реченица мора бити у другом реду.

Укратко, морамо се придржавати следећих правила

1. Уникатан ид.

2. Увек после ИД -а користите знакове =>

3. Одвојено лице преведено фразом другом линијом. (Одвојено новим редом или \ н).

4. Да су датотеке у ткт формату.

3. Креирање Ајака

 $ (доцумент) .реади (фунцтион () {вар селецтор = '#транслате'; $ (селецтор) .он ('цлицк', фунцтион (е) {е.превентДефаулт (); стартЛанг ($ (тхис));} ); вар стартЛанг = фунцтион (ел) {вар ел = $ (ел); вар тект = ел.аттр ('дата-тект'); вар филе = ел.аттр ('дата-филе'); филе = филе. сплит (','); тект = тект.сплит (','); вар индек = ел.аттр ('дата-индек'); иф (индек> = филе.ленгтх) {индек = 0;} цхангеНаме (ел , текст [индекс]); цхангеИндек (ел, индекс); лоадЛанг (датотека [индекс]); $ ('хтмл'). аттр ('ланг', датотека [индекс]);}; вар цхангеНаме = функција (ел, наме) {$ (ел) .хтмл (наме);}; вар цхангеИндек = фунцтион (ел, индек) {$ (ел) .аттр ('дата-индек', ++ индек);}; вар лоадЛанг = фунцтион ( ланг) {вар процессЛанг = фунцтион (дата) {вар арр = дата.сплит ('\ н'); фор (вар и ин арр) {иф (линеВалид (арр [и])) {вар обј = арр [и] .сплит ('=>'); ассигнТект (обј [0], обј [1]);}}}; вар ассигнТект = функција (кључ, вредност) {$ ('[дата-ланг = "' + кеи + ' "] '). сваки (фунцтион () {вар аттр = $ (тхис) .аттр (' дата-дестине '); иф (типеоф аттр! ==' ундефинед ') {$ (тхис) .аттр (аттр, вредност); } елсе {$ (ово) .хтмл (вредност); }}); }; вар линеВалид = фунцтион (лине) {ретурн (лине.трим (). ленгтх> 0); }; $ ('. лоадинг-ланг'). аддЦласс ('схов'); $ .ајак ({урл: 'ланг /' + ланг + '. ткт', еррор: фунцтион () {алерт ('Но транслатион лоадед');}, суццесс: фунцтион (дата) {$ ('. лоадинг-ланг ') .ремовеЦласс (' схов '); процессЛанг (дата);}}); }; }); 

Такође морамо да изменимо наш хтмл:

 Моја вишејезична веб локација енглески Учитавање… 
Здраво Свете

Овим можемо тестирати да ли се наша страница већ преводи.

Хајде да мало објаснимо шта смо урадили у нашој јавасцрипт датотеци и шта смо ажурирали у нашем хтмл -у.

Процес који се изводи у јавасцрипт датотеци је помоћу ознаке која ради као дугме за превођење, постављамо догађај тако да је он задужен за слање ајак захтева за издвајање датотеке језика који ћемо користити у тренутак.

У нашем дугмету за превод имамо три атрибута који се зову датотека података, индекс података, податак-текст.

Атрибути дугмета
дата-филе = "је, уОн је одговоран за различите језике које имамо на нашој веб страници. За наш водич је и даље. Ако се добро сећате, наше датотеке за превод се зову ес.ткт и ен.ткт.
дата-индек = "1Има позицију следеће датотеке коју треба имати. 0 је тренутно и 1 унутра, то значи да је следећи који треба унети. Ову организацију можемо видети у атрибуту датотеке података, само замислите да је датотека података слична вектору.
дата-тект = "Енглески, ЕспанолОдговоран је за визуализацију на којем се језику тренутно приказује наша апликација.

Измена коју смо унели у наш ХТМЛ код била је додавање атрибута дата-ланг ознакама које ћемо превести, са јединственим ИД-ом. Требали бисте већ знати да је овај јединствени ИД конфигурисан у датотекама ен.ткт и ес.ткт.

На пример

Здраво Свете

Хајде да тестирамо нашег преводиоца и видимо да ли оно што смо развили заиста покрива све што нам је потребно и колико је сложено додавање новог језика.

Хајде да додамо нови језик. У овој фази нашег развоја морамо схватити да морамо учинити само две ствари:

1. Креирајте нашу нову језичку датотеку.

2. Додајте нови језик у датотеку података и атрибуте текста података.

Ми стварамо француски језик за нашу веб страницу. Ми креирамо нашу језичку датотеку под називом фр.ткт унутар директоријума ланг.

Садржај Фр.ткттитуло-веб => Мон сите мултилингуал
добродошли => Биенвенуе сур мон сите
здраво => салут монде

Ажурирамо дугме за језике, па је у индек.хтмл ознака:

 енглески језик 

Савршен! тако да можемо додати све језике који су нам потребни на наше веб локације без даљих компликација. Урадимо други тест. Неко се пита, може ли се преведена фраза поново користити на једној етикети и поставити на другу како не би морао да понавља исти превод чак и ако је штампан на различитим местима? Одговор је ДА, урадимо пример.

Употријебимо наслов веба са Уникуе ИД титле-веб који тренутно користимо у нашој ознаци, а ми ћемо га поставити у подножје наше странице. То је следеће:

 Моје вишејезично место © 

 $ .ајак ({урл: 'цоунтри.пхп', суццесс: фунцтион (дата) {$ (селецтор) .аттр ('дата-индек', дата); стартЛанг ($ (селецтор));}});