Как реализовать переключение языков на многоязычном сайте без использования серверной части?

Как можно организовать переключение языков на многостраничном сайте на страницах 7-9 при помощи JavaScript? Можете ли дать советы или рекомендации по данной задаче?
  • 27 марта 2024 г. 16:20
Ответы на вопрос 3
Для реализации переключения языков на многоязычном сайте без использования серверной части можно использовать JavaScript и хранить тексты на разных языках в отдельных JSON файлах или объектах. 

Для организации переключения языков на страницах 7-9 многостраничного сайта, можно использовать следующий подход:

1. Создать массив или объект с текстовыми значениями на разных языках для каждой страницы. Например:

```javascript
var languages = {
  page7: {
    en: {
      title: 'Page 7',
      content: 'This is page 7 in English.'
    },
    es: {
      title: 'Página 7',
      content: 'Esto es la página 7 en español.'
    }
  },
  page8: {
    en: {
      title: 'Page 8',
      content: 'This is page 8 in English.'
    },
    es: {
      title: 'Página 8',
      content: 'Esto es la página 8 en español.'
    }
  },
  page9: {
    en: {
      title: 'Page 9',
      content: 'This is page 9 in English.'
    },
    es: {
      title: 'Página 9',
      content: 'Esto es la página 9 en español.'
    }
  }
};
```

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

```javascript
function updateLanguage(page, lang) {
  document.getElementById('pageTitle').innerHTML = languages[page][lang].title;
  document.getElementById('pageContent').innerHTML = languages[page][lang].content;
}
```

3. Создать кнопки или выпадающее меню для выбора языка на каждой странице и добавить обработчик события для переключения языка. Например:

```javascript
document.getElementById('btnEnglish').addEventListener('click', function() {
  updateLanguage('page7', 'en');
});

document.getElementById('btnSpanish').addEventListener('click', function() {
  updateLanguage('page7', 'es');
});
```

4. Вызвать функцию `updateLanguage` с соответствующими параметрами для инициализации текстовых значений на странице при загрузке. Например:

```javascript
updateLanguage('page7', 'en');
```

Это основной подход к реализации переключения языков на многостраничном сайте с помощью JavaScript. Вы можете также добавить проверки на существование элементов на странице и улучшить архитектуру кода, например, вынести текстовые значения в отдельные файлы или использовать библиотеку для интернационализации.
Модифицируй роутер или mod rewrite веб сервера таким образом, чтобы идентификатор выбранного языка был в ссылке (например my.site.com/fr/blablabla ), при отсутствии этого идентификатора проводи проверку по заголовку ( <a href="https://stackoverflow.com/questions/1661915/how-to-redirect-based-on-accept-language-with-apache-mod-rewrite" rel="nofollow">например</a> для apache, главное идея). Это позволит в интерфейсе дать пользователю выбор языка и одновременно без этого выбора делать его автоматически. <br/> <br/> да, перевод нужно размещать поэлементным и прописывать в своем json. <br/> <br/> Так же есть сервисы типа гугла или yandex, устанавливаются на сайт и делают автоматический перевод (не рекомендую)
Если просто и грязно, и для (*поправка) пары страниц, то: <br/> <br/> <pre><code class="javascript">&lt;html&gt;
    &lt;head&gt;
        &lt;style&gt;
            :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;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="root"&gt;
            &lt;div lang="ru-RU"&gt;
                Содержимое на русском
            &lt;/div&gt;
            &lt;div lang="en-US"&gt;
                Content in english
            &lt;/div&gt;
            &lt;button id="languageSwitcher"&gt;&lt;/button&gt;
            &lt;script type="module"&gt;
                const { documentElement } = document
                documentElement.setAttribute('lang', navigator.language)
                const languageSwitcherButton = documentElement.querySelector('button#languageSwitcher')
                const determineLanguage = () =&gt; documentElement.getAttribute('lang') === 'ru-RU' ? 'Switch to English' : 'Переключить на Русский'
                languageSwitcherButton.textContent = determineLanguage()
                languageSwitcherButton.onclick = ({ target }) =&gt; {
                    documentElement.getAttribute('lang') === 'en-US' ? (
                        documentElement.setAttribute('lang', 'ru-RU')
                    ) : documentElement.setAttribute('lang', 'en-US')
                    target.textContent = determineLanguage()
                }
            &lt;/script&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
Похожие вопросы