Как сделать сайт на двух языках?

Question

[jupyter]

Всем привет.
Читал тут советы по созданию сайта на нескольких языках. Мне надо на двух: eng/ru.
Не до конца понимаю реализацию. Изначальный сайт на домене com, на анг языке. Надо на этот лендинг (у сайта всего 1 страница) добавить переключатель на rus. Читал что надо использовать json и в нем прописывать значение для двух языков. Вопрос, а как быть с контентом сайта? Те практически какой алгоритм / где правильно прописывать значения для другого языка ?
И второй вопрос: если выбран на сайте определенный язык - как сделать чтобы при обновлении страницы он и оставался, а не переключался на первичный язык ?

Третий вопрос: можно ли сделать вторую страницу - полностью на другом языке и подключить ее к меню выбора языка?

Спасибо.

Comments

[x404]

Можно создать php функцию translate('Here we write in English');
Используем её для вывода текста в конкретном месте.

Создать микро админку, где будет возможность добавлять языки сайту. Допустим добавил язык RU, создается файл с массивом 'Here we write in English' = > 'Тут пишем по английски', в этой админке делаете перевод всех таких мест.

А при посещении site.com/ru передавайте ключ RU, если есть такой язык, то выводим переводы русского.

(очень образное описание реализации).

[jupyter]

Сергей Сыса, спасибо. php и админка сейчас это слишком для меня...разобраться бы с реализацией на js

[jupyter]

Друзья, в продолжение моего вопроса:
я реализовал переключатель на два языка таким образом (через подключение js с библиотекой jquery):

var arrLang = {
    'en' : {
        'home' : 'home',
        'about' : 'about me',
        'service' : 'services & prices',
        'contact' : 'contact',
        }, 
    'ru' : {
        'home' : 'главная',
        'about' : 'обо мне',
        'service' : 'услуги',
        'contact' : 'контакты',
        }
};
         
$(function(){
    $('.translate').click(function(){
        var lang = $(this).attr('id');

        $('.lang').each(function(index, element){
            $(this).text(arrLang[lang][$(this).attr('key')]);
        });
    });
});

Но теперь проблема: при переключении языка с дефолтного на рус сбиваются стили (летит верстка). Подскажите, как мне переопределить стили для русского языка? Спасибо.

[x404]

jupyter, Это не обязательно делать через jquery. Тащить целую либу ради click и each - так себе занятие...

Стили не должны сбиваться. Смотрите через отладчик, может пропадают классы.
что вообще происходит с кодом?

[jupyter]

Сергей Сыса, спасибо! уже решаю вопрос через доп страницу в каталоге

Answer 1

[dollar]

Если языка всего два, то удобнее всего (для клиента) загрузить оба языка в одной странице, тем более это лендинг и далёкое путешествие по сайту и море контента не планируется.

Таким образом, нужно:
1) Хранение текущего языка в куках или в локальном хранилище.
2) Если пользователь в первый раз на сайте, то автоматически определить язык. Проще всего это сделать путём JS через navigator.language, navigator.languages и т.д. (надо гуглить).
3) Кнопка переключения языков, где хотите.
4) Язык меняется без перезагрузки страницы. Это тоже JS.
5) Имхо, также важно, чтобы сайт работал без JS - например, на английском. Хотя на сервере тоже можно определять язык, и менять местами контент, но в целом это лишнее, если мало платят за работу.

Answer 2

[hzzzzl]

про второй вопрос это localStorage
https://tproger.ru/articles/localstorage/

например localStorage.setItem('lang', 'ru')
..

window.onload = function() {
  lang = localStorage.getItem('lang');
  if(lang === 'ru') {

  } else {

  }
}

Comments

[jupyter]

спасибо