2

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

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

4 ответа 4

6

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

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

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

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

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

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

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

4

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

1
  • Этого ответа вполне достаточно, для того чтобы понять, что данные кнопки не нужно пытаться делать front-end'у )) Я думал всё попроще, как допустим с увеличением шрифта на странице по клику. 24 июл 2017 в 16:26
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>
0
1

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

elementButton = document.getElementById(id);

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

Как это сделать

1
  • Ваш ответ заканчивается вопросом или он просто не дописан?
    – V.March
    25 авг 2017 в 19:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.