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

564
26 июля 2017, 20:40

Каким образом можно реализовать кнопку переключения языка сайта в виде иконки с буквами «EN», при клике на которую весь сайт «превращался» бы в англоязычный?

Знаю про возможность использования сервиса Google Translate, но думаю, что этот вариант слишком топорный.

Answer 1

Сайт должен уметь обрабатывать ссылки вида /en/, /bg/, /jp/ и прочее, по умолчанию язык русский. При переходе по ссылке site.com/en/ из базы тянутся переводы текстов на английском языке. Но это серверное решение. Если стоит задача сделать это все только версткой, то можно поизвращаться либо с js, либо с localStorage, тогда переводы будут браться из готовых массивов данных. Либо просто создать папку en и положить в нее сверстанные страницы на английском языке. Может лучше уточните задачу?

Answer 2

Если делать правильно, нужно использовать сторонние либы для перевода. Т.е. весь текст сайта хранится в "словаре", а когда нажимаешь кнопку - происходит выбор нужного словаря, меняется текст на сайте.

Таких библиотек много, порезерчи. Нужно посидеть и поковыряться.

Вариант два - гугл транслейтор АПИ https://cloud.google.com/translate/docs/

Вариант три (если сайт очень-очень маленький), просто делай дубли страниц с заменой текста.

Если вопрос был про то, как именно реализовать саму кнопку - все просто. Создаешь , две штуки с разными id. После этого JS-ом вешаешь обработчик событий. elementButton = document.getElementById(id);

На него вешаешь обработчик - elementButtom.addEventListener("click", function(){тело функции});

Если делаешь ссылками - вообще никак не надо обрабатывать. Просто кидаешь линки на переведенные страницы.

Answer 3

Сталкивался с таким, вот мой вариант решения: Использовать теги типа <en>, <ru> и подобных (ну или <div class="en">) И дать им всем display:none; А при загрузке страницы выполнить код:

var lang = "en"; //Сюда нужно внести текущий выбранный язык... Хоть с 
localStorage, хоть с печенек, хоть с фиг знает, чего
var style = document.createElement("style");//Создаём <style>
style.innerHTML = lang+"{display:block;}";//Делаем видимым нужные теги
document.head.appendChild(style); //И крепим это добро к <head>

Теперь все теги нужного языка будут видимыми! =)

Пример использования:

<ru>Русский текст</ru><en>English text</en>
READ ALSO
Вертикальное выравнивание в Bootstrap CSS
HTML

Вертикальное выравнивание в Bootstrap CSS

Делаю через Bootstrap 3, нужно выравнивание нескольких (любых объектов) с чётным-нечётным количеством (не строчные!)Примеры с прописыванием точных...

 717
Нарисовать разные слои так, чтобы не сбился весь дизайн
HTML

Нарисовать разные слои так, чтобы не сбился весь дизайн

Есть страница, составленная из квадратиков как на фотографии ниже(1)И все они расположены плотно друг к другу

 277
Отправка вложений из формы на почту PHP
HTML

Отправка вложений из формы на почту PHP

Есть форма

 348
Разместить кнопки в меню на одинаковое растояние и до конца экрана при разных разширениях
HTML

Разместить кнопки в меню на одинаковое растояние и до конца экрана при разных разширениях

Здравствуйте, как можно с помощью css разместить кнопки на нижнем меню нормально, чтобы при сжатии экрана они просто сближались друг к другуи...

 261