Задать вопрос
@Danila232
javascript

Как лучше сделать переключение языков на многостр. сайте?(без бэка)?

Есть многостраничный сайт, страниц 7-9, надо сделать переключение языков по кнопкам. Нашёл способ сделать такое на чистом JS, если коротко: для каждой страницы делаешь свой .json файл, в котором для каждой отдельной строчки текста пишешь перевод. И потом по кнопке - происходит вставка этих строчек перевода во все текста на сайте

Но минусы такого способа понятны сразу - чтобы он работал, мне нужно для КАЖДОЙ строчки текста на сайте написать её перевод в .json файле, как на 1м скрине. Мне кажется это костыль, и на реальных проектах делают как-то по другому.

Прочитал ещё про "заголовок Accept-Language", типо это заголовок запроса, и можно там как-то отслеживать язык пользователя. Но нормальной инфы как использовать этот способ я не нашёл, я даже не понял на чём это делается: Node.js, PHP или можно на обычном JS, в ру сегменте вообще ничего, в анг. большинство статей за 2012-2014 годы

В общем, расскажите пж, каким способом стоит делать мультиязычность среднего по размеру сайта?(без бэка)
  • Вопрос задан
  • 349 просмотров
20 комментариев
Подписаться 2 Простой 20 комментариев
Пригласить эксперта
Ответы на вопрос 2
@rPman
Модифицируй роутер или mod rewrite веб сервера таким образом, чтобы идентификатор выбранного языка был в ссылке (например my.site.com/fr/blablabla ), при отсутствии этого идентификатора проводи проверку по заголовку (например для apache, главное идея). Это позволит в интерфейсе дать пользователю выбор языка и одновременно без этого выбора делать его автоматически.

да, перевод нужно размещать поэлементным и прописывать в своем json.

Так же есть сервисы типа гугла или yandex, устанавливаются на сайт и делают автоматический перевод (не рекомендую)
Ответ написан
7 комментариев
7 комментариев
muscimolus
@muscimolus
Если просто и грязно, и для (*поправка) пары страниц, то:

<html>
    <head>
        <style>
            :root[lang="ru-RU"] [lang="ru-RU"] {
                display: block;
            }
            :root[lang="ru-RU"] [lang="en-US"] {
                display: none;
            }
            :root[lang="en-US"] [lang="en-US"] {
                display: block;
            }
            :root[lang="en-US"] [lang="ru-RU"] {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <div lang="ru-RU">
                Содержимое на русском
            </div>
            <div lang="en-US">
                Content in english
            </div>
            <button id="languageSwitcher"></button>
            <script type="module">
                const { documentElement } = document
                documentElement.setAttribute('lang', navigator.language)
                const languageSwitcherButton = documentElement.querySelector('button#languageSwitcher')
                const determineLanguage = () => documentElement.getAttribute('lang') === 'ru-RU' ? 'Switch to English' : 'Переключить на Русский'
                languageSwitcherButton.textContent = determineLanguage()
                languageSwitcherButton.onclick = ({ target }) => {
                    documentElement.getAttribute('lang') === 'en-US' ? (
                        documentElement.setAttribute('lang', 'ru-RU')
                    ) : documentElement.setAttribute('lang', 'en-US')
                    target.textContent = determineLanguage()
                }
            </script>
        </div>
    </body>
</html>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Приглашаю искусствоведа сделать справку про 10 предметов антиквариата
27 апр. 2024, в 12:30
2000 руб./за проект
Нужна программа
27 апр. 2024, в 11:55
1000 руб./за проект
Power Query настройки конфиденциальности
27 апр. 2024, в 11:55
1500 руб./за проект
Ещё заказы