Многостраничный мультиязычный сайт | JavaScript

В данном видео разберем вопрос мультиязычности многостраничного сайта, где переключение языков будет происходить без перезагрузки страницы.
При переходе между страницами и при перезагрузке будет сохраняться выбранный язык.

Поддержать меня на Boosty:

Тайминги:
00:00 Приветствие и превью
00:40 Начало написания скрипта
01:20 Суть мультиязычности
02:30 Прописывание data-атрибутов в разметке
02:57 Продолжаем писать код
03:57 Функция для определения нужного объекта с текстами
04:54 Функция для перебора объекта с текстами
06:21 Вешаем обработчики событий на кнопки в хедере
07:44 Функция для сброса активного класса у кнопок в хедере
08:45 Доработка функционала
11:59 Функция для проверки активной кнопки
13:09 Убираем лишнее
14:11 Варианты улучшения скрипта
15:07 Функция для определения языка браузера
17:37 Варианты улучшения скрипта №2
18:23 Заключение

Готовый код:

Ссылка на плейлист по JavaScript:

Мой телеграм канал по айтишечке:

Я в соц.сетях:

[timurbirgalin]

Великолепное видео! Спасибо автору за проделанную работу, очень понятно и доходчиво всё преподнесено) Я очень долго мучился с мультиязычностью и благодаря этому видео мой проект сдвинулся с мёртвой точки:)

[СоюзЗдравыхСил]

Спасибо большое, лучшая инфа по этой теме. Очень редко пишу комменты, но тут надо)

[j-lewis]

Это был очень полезный урок, большое спасибо и успехов в наборе подписчиком этому замечательному каналу и всяческих благ его автору!

[ВиталийЮрьевич-чу]

Спасибо за хороший урок, лайк, подписка, коммент для продвижения

[lavric]

М-да. Сейчас только начинаю JS изучать, смотрел, как будто в пустой экран. Переменные, функции, массивы. Вроде, так то все по аналогии с версткой идет, но откровенно, ничего почти не понял. Плохо, когда мало информации, но и когда много информации, тоже не хорошо! Я в общем, про информацию в интернете!
Доступно, по полочкам, мало кто на жизненных примерах объясняет и учит!

[ОлександрЛаска]

Блин, вы мне реально помогли! Смотрел у Лущенко этот вариант реализации, но у него была реализация через классы, вроде всё хорошо, но стилизация на аккордеоне ломалась на поле с текстом. И никак не смог победить. Находил разные аккордеоны с разной реализацией структуры аккордеона, но проблема везде проявлялась.

[булава-жм]

Лайк. Супер видео, хотелось бы немного сео)
Урлы вида сайт/ру, сайт/ру/страница и генерацию hreflang 😊

[magnussen]

здраствуйте у меня вопрос я только учусь самостоятельно програмировывать, по этому я не могу понять я тытаюсь сделать сайт для ногтей и там есть цены моих услуг, так вот мне нужно чтоб в левой стороны были услуги с правой стороны были цены можно ли как то это сделать в вашем примере ? пожскажите пожалуйста если вам не трудно

[ВПоискеЛучшейЖ]

Спасибо за урок. Как лучше сделать многостраничный сайт : ссылками в html, php или как-то по-другому?

[khyleri]

Доброго времени суток.
Следовал вашему уроку — всё работает отлично, но я столкнулся с проблемой: если на странице несколько идентичных data атрибутов, то перевод применяется только к одному из них. Например, у меня на странице 3 блока с data-lang="test_title" (рус. "Блок"/англ. "Block" ), при смене языка перевод "Block" будет применён только к первому, остальные останутся "Блок". Будьте добры, объясните как это изменить?
P.S.: Прошу прощения если задал очевидный / элементарный вопрос.

[beegoodb]

Спасибо, очень помогли! Давно владеете JS?

[pavelbrunki]

Отличное видео. Сделайте пожалуйста видео "Как сделать английкую верию сайта на html css + еще код" )

[W-mn]

Здравствуйте, у вас нет случайно видео где то как при выборе языка добавлять в url название языка? Если есть дайте ссылку, буду благодарен...

[nikivanov]

style.display= hidden/block я бы применил для блоков с текстАми. И отделение данных от кода лучше.