Как да преведете уебсайт на няколко езика

Уебсайтовете се развиват ден след ден, тъй като комуникацията на света става все по -близка. Всеки път имаме нужда нашите разработки не само да бъдат използвани на местния пазар, но и за разширяване на световните пазари. Един от първите начини за постигане на това е нашият сайт (или приложения) да поддържа множество езици. Днес ще научите как да приложите многоезичен към вашия уебсайт или приложение.

Как ще работи нашият уеб преводач

1. На нашия сайт ще имаме бутон, който ще ни даде възможност да променим нашия сайт на различните езици, които сме конфигурирали.

2. Преводът ще се извърши с javascript, който извлича преведените текстове чрез ajax, записани в текстови файлове, които преди това сме конфигурирали с маркерите на нашия уебсайт.

3. Ще имаме външна услуга, която ще ни каже от коя държава ни посещава и по този начин ще визуализира идеалния език за посетителя. Ще се справим с това чрез IP на посетителя.

Предимства на нашия преводач

1. Не е необходимо да опреснявате сайта, за да приложите превода, тъй като много сайтове го правят по този начин.

2. Имаме само една версия на нашия фронт, не е необходимо да имате два или повече html, за да обработвате текстовете на различни езици.

3. Ако по -късно искаме да добавим други езици, можем да го конфигурираме много лесно.

4. Супер лесен за кандидатстване за сайтове, които вече сме направили и искаме да поставим на многоезични.

ЗабележкаЗа да разберете ясно този урок, препоръчително е да имате предишни познания по HTML, CSS, Javascript (особено jQuery), познания по Ajax и малко по PHP.

1. Стартиране на развитието

 Моят многоезичен сайт Английски Зареждане …
Здравей свят

 .loading-lang {непрозрачност: 0; } .loading-lang.show {opacity: 1; } 

Засега файлът main.js остава празен. Можем да тестваме от предпочитания от нас локален уеб сървър. Необходимо е да се използва уеб сървър, тъй като по -късно ще започнем да правим ajax заявки.

2. Създаване на файлове за превод

Съдържание на файла
es.txttitulo-web => Моят многоезичен сайт
добре дошли => добре дошли в моя сайт
здравей => здравей свят
en.txttitulo-web => Моят многоезичен сайт
welcome => Добре дошли в моя сайт
здравей => Здравей свят

Ще обясня малко за тези файлове как са структурирани. Всяка фраза, която използваме на нашия уебсайт, трябва да бъде идентифицирана с уникален идентификатор, което ще бъде начинът да се преведе всяка фраза, където трябва да бъде поставена конкретно. Например, за заглавието на сайта използваме ID title-web, последван от знаците =>, след което съответната фраза. Всяко изречение трябва да е на различен ред.

В обобщение трябва да спазваме следните правила

1. Уникален идентификатор.

2. Винаги използвайте след ID знаците =>

3. Отделно лице преведена фраза с различен ред. (Разделени с нов ред или \ n).

4. Файловете са във формат txt.

3. Създаване на Ajax

 $ (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 = file. split (','); text = text.split (','); var index = el.attr ('data-index'); if (index> = file.length) {index = 0;} changeName (el , текст [индекс]); changeIndex (el, индекс); loadLang (файл [индекс]); $ ('html'). attr ('lang', файл [индекс]);}; name) {$ (el) .html (name);}; 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 = функция (ключ, стойност) {$ ('[data-lang = "' + key + ' "] '). всеки (function () {var attr = $ (this) .attr (' data-destine '); if (typeof attr! ==' undefined ') {$ (this) .attr (attr, стойност); } else {$ (this) .html (value); }}); }; var lineValid = function (line) {return (line.trim (). length> 0); }; $ ('. loading-lang'). addClass ('show'); $ .ajax ({url: 'lang /' + lang + '. txt', грешка: function () {alert ('Не е зареден превод');}, success: function (data) {$ ('. loading-lang ') .removeClass (' show '); processLang (данни);}}); }; }); 

Също така трябва да променим нашия html:

 Моят многоезичен сайт Английски Зареждане … 
Здравей свят

С това можем да проверим дали нашият сайт вече се превежда.

Нека обясним малко какво направихме в нашия JavaScript файл и какво актуализирахме в нашия html.

Процесът, извършен във файла javascript, е посредством маркера, който работи като бутон за превод, поставяме събитие, така че то да отговаря за отправянето на ajax заявка за извличане на файла на езика, който ще използваме в момент.

В нашия бутон за превод имаме три атрибута, наречени файл с данни, индекс на данни, данни-текст.

Атрибути на бутоните
data-file = "е, вТой е отговорен за наличието на различните езици, които имаме на нашия сайт. За нашия урок е и продължава. Ако си спомняте добре нашите файлове за превод се наричат ​​es.txt и en.txt.
data-index = "1Той има позицията на следващия файл, който трябва да има. 0 е битие и 1 ин, това означава, че следващият за внасяне е. Можем да видим тази организация в нашия атрибут на файл с данни, просто си представете, че файлът с данни е подобен на вектор.
data-text = "Английски, испанскиТой е отговорен за визуализирането на кой език в момента се показва приложението ни.

Промяната, която направихме в нашия HTML код, беше да добавим атрибута data-lang към маркерите, които ще преведем, с уникалния идентификатор. Вече трябва да знаете, че този уникален идентификатор е конфигуриран във файловете en.txt и es.txt.

Например

Здравей свят

Нека поставим нашия преводач на тест и ще видим дали това, което сме разработили, наистина покрива всичко необходимо и колко сложно е да добавим нов език.

Нека добавим нов език. На този етап от нашето развитие трябва да осъзнаем, че трябва да направим само две неща:

1. Създайте нашия нов езиков файл.

2. Добавете новия език в атрибутите на файла с данни и текста на данните.

Ние създаваме френски език за нашия сайт. Ние създаваме нашия езиков файл, наречен fr.txt, в директорията lang.

Fr.txt съдържаниеtitulo-web => Mon site многоезичен
добре дошли => Bienvenue sur mon site
здравей => salut monde

Актуализираме нашия бутон за езици, така че в index.html етикетът е:

 Английски 

Перфектно! така че можем да добавим всички необходими езици към нашите уебсайтове без допълнителни усложнения. Нека направим втори тест. Човек се чуди нещо, може ли преведена фраза да се използва повторно на един етикет и да се постави на друг, за да не се налага да повтаря същия превод, дори ако е отпечатан на различни места? Отговорът е ДА, нека направим примера.

Нека използваме заглавието на мрежата с Unique ID title-web, което в момента използваме в нашия етикет, и ще го поставим в долния колонтитул на нашия сайт. То е както следва:

 Моят многоезичен сайт © 

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