мультиязычность сайта через дублирование.

sweet candy

Новичок
Автор темы
22
0
есть папка по пути
путь:
Desktop\project\name_project
которая является корнем проекта сайта
сказали сделать перевод сайта английский-русский через дублирование, продублировать нужные файлы в папку /ru которая по пути лежит
путь:
Desktop\project\name_project/ru
вроде бы подключил все как надо, но ничего не фурычило от слова совсем, решил прибегнуть к чату гпт, 2 часа бестолку)

файл для русской версии (header.html)
HTML:
<header class="header" id="header">
  <div class="container">
    <a href="/" class="logo">
      <img src="/ru/images/logo.svg" alt="">
    </a>
    <nav class="header__menu menu">
      <div class="menu__hamburger" id="menu">МЕНЮ</div>
      <div class="menu__holder" id="nav">
        <ul class="menu__list">
          <li class="menu__item"><a href="/#services" class="menu__link link anchor" id="services">услуги</a></li>
          <li class="menu__item"><a href="/#about" class="menu__link link anchor" id="about">о нас</a></li>
          <li class="menu__item"><a href="/#portfolio" class="menu__link link anchor" id="portfolio">портфолио</a></li>
          <li class="menu__item"><a href="/#contacts" class="menu__link link anchor" id="contacts">контакты</a></li>
        </ul>
        <div class="menu__close" id="menuClose"></div>
      </div>
    </nav>
    <div class="lang">
      <a href="#" class="lang__item lang__item--active" data-lang="en" id="englishLink">EN</a>
      <span id="languageSeparator">/</span>
      <a href="/ru/index.html" class="lang__item" data-lang="ru" id="russianLink">RU</a>
    </div>
</header>
<div class="overlay" id="overlay"></div>

для английской
HTML:
<header class="header" id="header">
  <div class="container">
    <a href="/" class="logo">
      <img src="/images/logo.svg" alt="">
    </a>
    <nav class="header__menu menu">
      <div class="menu__hamburger" id="menu">MENU</div>
      <div class="menu__holder" id="nav">
        <ul class="menu__list">
          <li class="menu__item"><a href="/#services" class="menu__link link anchor" id="services">услуги</a></li>
          <li class="menu__item"><a href="/#about" class="menu__link link anchor" id="about">о нас</a></li>
          <li class="menu__item"><a href="/#portfolio" class="menu__link link anchor" id="portfolio">портфолио</a></li>
          <li class="menu__item"><a href="/#contacts" class="menu__link link anchor" id="contacts">контакты</a></li>
        </ul>
        <div class="menu__close" id="menuClose"></div>
      </div>
    </nav>
    <div class="lang">
      <a href="#" class="lang__item lang__item--active" data-lang="en" id="englishLink">EN</a>
      <span id="languageSeparator">/</span>
      <a href="/ru/index.html" class="lang__item" data-lang="ru" id="russianLink">RU</a>
    </div>
  </div>
</header>
<div class="overlay" id="overlay"></div>

при нажатии на RU просто перезагружается страница и кидает на ссылку http://localhost:3333/?lang=ru и так-же обратно только http://localhost:3333/?lang=en, переключатель возвращается в активную форму на EN)
в чем проблема?
languageswitcher.js:
document.addEventListener('DOMContentLoaded', function () {
    const englishLink = document.getElementById('englishLink');
    const russianLink = document.getElementById('russianLink');
    const languageSeparator = document.getElementById('languageSeparator');

    function switchLanguage(language) {
        console.log(`Switching to ${language}`);
        const currentPath = window.location.pathname;
        const params = new URLSearchParams(window.location.search);
        const currentLang = params.get('lang') || 'en';

        if (language !== currentLang) {
            params.set('lang', language);
            const newPath = `${currentPath}?${params.toString()}`;
            console.log(`New path: ${newPath}`);
            window.location.href = newPath;
        }
    }

    englishLink.addEventListener('click', function (event) {
        event.preventDefault();
        switchLanguage('en');
    });

    russianLink.addEventListener('click', function (event) {
        event.preventDefault();
        switchLanguage('ru');
    });

    // Проверяем язык при загрузке страницы
    const params = new URLSearchParams(window.location.search);
    const currentLang = params.get('lang') || 'en';
    console.log(`Current language: ${currentLang}`);

    // Если язык в параметрах запроса не соответствует текущему языку, переключаем язык
    if (currentLang === 'ru') {
        switchLanguage('ru');
    }
});
 

PaddingtonBaby

Участник
66
13
Вы хотите, чтобы менялся язык, но при этом обе версии на русском?.. Не совсем понимаю, в чем проблема? В переключателе или обработке события? А что делает Ваш JS код, анализировали? 🙃
+ https://qna.habr.com/q/1001843
+ https://ru.stackoverflow.com/questions/542767/Мультиязычность-с-javascript-на-всех-страницах-сайта