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

#javascript #html #google_translate

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

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

Ответы

Ответ 1

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


Ответ 2

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

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

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

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

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

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

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


Ответ 3

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

var lang = "en"; //Сюда нужно внести текущий выбранный язык... Хоть с 
localStorage, хоть с печенек, хоть с фиг знает, чего

var style = document.createElement("style");//Создаём